CSS @ font-face的問題

Question

我正在開發帶phonegap的android應用，並想使用自定義字體。 為此，我嘗試使用CSS @ font-face，並且首先進行了一些測試，以檢查它是否按預期的方式工作。 我在同一目錄中創建了一個簡單的index.html文件和一個.css文件，在該目錄中還復制了我想要使用的字體（woff2格式）的文件。 這是css和html文件的代碼：

 @font-face { font-family: Roboto_Bold; src: url(/roboto_bold.woff2) format(woff2); font-style: normal; font-weight: 700; } p { font-family: Roboto_Bold; } 

 <p>prueba</p> 

問題是，當我使用Google Chrome打開index.html時，沒有出現roboto_bold字體。 文本使用瀏覽器默認字體編寫，並且控制台中未顯示任何錯誤。 我已經盡力解決了所有問題（更改字體格式，檢查鏈接，檢查我的瀏覽器版本），但是找不到解決方案。 知道為什么@ face-font無法正常工作嗎？

這是我目錄中文件的屏幕截圖：

Answer 1

刪除字體名稱的/ infront，因為您的字體文件與CSS文件位於同一目錄中。

另外，請嘗試刪除字體名稱中的下划線，並將其放在引號中-http: //www.w3schools.com/cssref/pr_font_font-family.asp

@font-face {
  font-family: 'RobotoBold';
  src: url(roboto_bold.woff2) format(woff2);
  font-style: normal;
  font-weight: 700;
}

p {
    font-family: 'RobotoBold',sans-serif;
}

更新

由於您的控制台未顯示任何錯誤，因此這不是與路徑相關的問題。 我建議Chrome無法顯示WOFF2文件，並且您可能需要包括該文件的其他版本，例如WOFF。 這是我最低限度使用的兩個。

您可以通過將字體文件（適用於版權）上傳到Webfont生成器工具（例如https://www.fontsquirrel.com/tools/webfont-generator ）來創建整個字體工具包

Answer 2

我在另一台裝有Chrome的操作系統的另一台計算機上嘗試了該代碼，並且運行良好。 看來這都是平台問題