本地驅動器上的自定義字體不起作用

在學習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。

來源

2017-05-09 Nizamuddin 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');

來源

2017-05-09 11:16:58

這工作出色，你的建議很有價值。遵循相同的做法會更好。但是，我在路徑中做了一些小改動，例如file：/// G：/JavaPrgsJGD/fonts/Google-fonts/Abel/Abel-regular.ttf，它在Chrome和Safari中運行，但在Mozilla和IE中不起作用。你可以把相同的光線放在一起嗎？ –

並非所有瀏覽器都支持所有功能。 Chrome和Safari支持最多功能，而IE和Opera-mini支持最少。雖然這是我的理論，但我可能是錯的。 –

本地驅動器上的自定義字體不起作用

回答

相關問題