如何調試@ font-face問題？

Question

我有以下CSS代碼：

// theMixPlainSemiBold
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我希望這會創建一個名為theMixPlainSemiBold的新字體系列。

導入此字體后，我會執行以下操作：

.box {
    ...
    font-family: 'theMixPlainSemiBold', sans-serif;
    ...
}

我有具有theMixPlainSemiBold字體家族的box類。

當我打開頁面時，我在.box看到sans-serif字體。

可能是什么問題？ 其他本地網絡字體也是如此，盡管它可以與Google字體一起很好地工作。

如何調試字體問題？ 我在開發人員工具中看不到任何錯誤/警告。 它看起來像我沒有從本地文件中加載字體...

Answer 1

雖然這不是問題的真正答案，但我自己發現了問題。 雙斜杠（ // ）不是有效的CSS注釋！ 請從開發者工具查看此屏幕截圖：

因此，我的代碼變為：

/* theMixPlainSemiBold */
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

現在已經正確加載了字體。

Answer 2

首先，使用明確的自定義font-family名稱可能有助於調試，因為這將阻止觸發和使用您的本地字體。

然后，盡管這不僅限於@font-face問題，但Firefox開發人員工具的控制台肯定可以幫助調試CSS問題。

在您的情況下，它將檢測到不良評論：

Selector expected.  Ruleset ignored due to bad selector.  yourfile.css:23

就我而言，由於復制后的編輯不當，我使用了逗號結尾而不是分號，這使Firefox無法下載該字體：

@font-face{
    font-family: SuperFont;
    src: url('../fonts/Superfont.ttf'),
}

控制台提出了：

Error in parsing value for ‘src’.  Skipped to next declaration.  myfile:18

否則控制台可能會抱怨：

downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf

（通常會在字體網址上顯示404，該死的錯字…）

Answer 3

@font-face {
    font-family: anyname;
    src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf');
        font-weight: normal;
        font-style: normal;
}

然后像這樣使用它：

#sample{
    font-family:anyname;
}

您可以在其中使用任何名稱。 /在URL中很重要，因為它表明它位於文件夾中。

Answer 4

如果您要制作原型並將新生成的HTML視為靜態本地文件，則可能不會加載字體。 （由於瀏覽器的某些跨域策略？）

因此，需要通過（本地）服務器請求html。

Answer 5

請檢查您的鏈接到源

@font-face {
  font-family: 'theMixPlainSemiBold';
  src: url('../css/fonts/.eot');
  src: url('../css/fonts/.eot?#iefix') format('embedded-opentype'),
       url('../css/fonts/.woff') format('woff'),
       url('../css/fonts/.ttf') format('truetype'),
       url('../css/fonts/.svg#open_sanslight') format('svg');
  font-weight: normal;
  font-style: normal;
}

也許您忘記了../因為如果Google字體正常工作，那么您的鏈接（源）字體肯定是錯誤的