本地驱动器上的自定义字体不起作用

问题描述：

在学习CSS时，我已经编写了以下代码以使用我放在本地硬盘上的Google字体。如果将html文件保存在字体文件夹中，但该文件不能在不同的文件夹中工作，则该html文件将起作用。请注意，我没有通过任何服务器工作。将文件保存到另一个文件夹后，双击它。本地驱动器上的自定义字体不起作用

<!doctype html> 
    <html lang="en"> 


     <head> 

      <meta charset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 


      <title>Custom Fonts</title> 

      <style> 
       @font-face { 
       font-family: 'Abel-regular'; 
       src: url('file://G:/JavaPrgsJGD/fonts/Google-fonts/Abel/Abel-regular.ttf'); 
       font-weight: normal; 
       font-style: normal; 
       }  
      </style> 

      <style type="text/css"> 

       .ngs-h3 {font-family: 'Abel-regular'; font-size: 30px; color: green;} 
       .ngs-p {font-family: 'Abel-regular'; font-size: 20px; color: blue;} 

      </style> 

      <script> 

      </script> 

     </head> 


     <body> 

      <h3 class="ngs-h3">Technical assessment of a movie</h3> 

      <p class="ngs-p"> 
       Many people see the movies and immediately after completion of the show, when asked by news channels, 
       they simply brush aside the movie saying, "It's a bogus movie" without realizing that what goes in for 
       bringing a movie to a cinema theatre for viewers, but of course, they have spent money and time to 
       watch a movie, they at least deserve a free opinion. 
      </p> 

      <p class="ngs-p"> 
       However, this forum is not about personal likes and dislikes of down-to-earth movie-goer. This forum 
       is for students who are pursuing their technical studies in film industry. Therefore, let us concentrate 
       on technical aspects of a movie. 
      </p> 

     </body> 


    </html>

我做错了吗？请指导我，并在有和没有服务器的情况下使用本地文件。谢谢。 NG SHAIKH。

提供的CDN也许只是删除'文件：//'你的URL。 – Huelfe

当使用本地文件时，引用**从当前文件**开始（在你的情况下它是HTML文件）。从这个HTML文件中提到URL，而不是完整的路径，包括G：/驱动器等。为了得到一个清晰的图片，你可以告诉你的HTML文件和字体文件放在哪里（'Abel-regular.ttf'） –

答

我个人强烈建议在使用像CSS这样的前端网络技术时使用绝对文件路径。你可以把字体在./font文件夹，并使用绝对路径，或使用

@font-face { 
    font-family: 'Abel-regular'; 
    src: url('./fonts/Abel-regular.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 

// or 

@import url('https://fonts.googleapis.com/css?family=Abel');

这工作出色，你的建议很有价值。遵循相同的做法会更好。但是，我在路径中做了一些小改动，例如file：/// G：/JavaPrgsJGD/fonts/Google-fonts/Abel/Abel-regular.ttf，它在Chrome和Safari中运行，但在Mozilla和IE中不起作用。你可以把相同的光线放在一起吗？ –

并非所有浏览器都支持所有功能。 Chrome和Safari支持最多功能，而IE和Opera-mini支持最少。虽然这是我的理论，但我可能是错的。 –

本地驱动器上的自定义字体不起作用

相关推荐