CSS Local字體沒有顯示

我在那個地方，我不知道我應該編碼錯誤。出於測試目的，我想爲我的網站使用本地字體。但我不明白它會顯示在所有設備上。這裏是我的代碼：CSS Local字體沒有顯示

HTML：

<head> 
    some basic stuff ... 
    <link rel="stylesheet" href="css/style.css"> 
    </head>

CSS：

body { 
    overflow-x:hidden; 

    font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important; 
    src: url('CircularStd-Book.eot'); 
    src: url('CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('CircularStd-Book.woff') format('woff'), 
     url('CircularStd-Book.ttf') format('truetype'), 
     url('CircularStd-Book.svg#CircularStd-Book') format('svg'); 
    }

Example image

它做我的臺式電腦上工作，而不是任何其他個人電腦... 謝謝您的幫助。

還沒這一個工作：

@font-face { 
     font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important; 
    src: url('../font/CircularStd-Book.eot'); 
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('../font/CircularStd-Book.woff') format('woff'), 
     url('../font/CircularStd-Book.ttf') format('truetype'), 
     url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');  
} 

body { 
    overflow-x:hidden; 
    font-family: 'Circular Std Book', Arial, sans-serif; 
    }

來源

2016-12-07 Julian

字體是否存儲在與style.css相同的目錄中？ – Kyle

不，字體位於文件夾/字體和文件夾/css/style.css中的樣式 – Julian

您的工作桌面上是否安裝了該字體？這也許可以解釋爲什麼它可以在本地使用，但不能在其他地方使用，也意味着CSS或字體仍然存在問題。 – AndFisher

你舉的例子似乎缺少@font-face

在這裏看到它的一個例子：https://css-tricks.com/snippets/css/using-font-face/

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

body { 
    font-family: 'MyWebFont', Fallback, sans-serif; 
}

而且如前所述，檢查路徑是正確的。該路徑相對於CSS文件本身。

來源

2016-12-07 11:01:44 AndFisher

啊，我錯過了@ font-face。 – Kyle

我不知道它是相對於CSS，但它是有道理的。感謝那。反正它仍然沒有顯示... – Julian

你也不需要引用'sans-serif' – AndFisher

使用！important標記定義font-family中的回退選項會導致此錯誤。我已刪除了回退，這裏是最後的工作代碼：

@font-face { 
     font-family: 'CircularStdBook'; 
    src: url('CircularStd-Book.eot'); 
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('../font/CircularStd-Book.woff') format('woff'), 
     url('../font/CircularStd-Book.ttf') format('truetype'), 
     url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');  
} 

body{ 
    overflow-x:hidden; 
    font-family: 'CircularStdBook', Arial, sans-serif; 
    }

感謝的對你有所幫助。

來源

2016-12-08 11:29:58 Julian

CSS Local字體沒有顯示

回答

相關問題