2016-02-27 87 views
3

該字體適用於w3schools網站,但不適用於我的網頁和jsfiddle。字體不能正常工作

jsfiddle example

HTML

<div> 
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. 
</div> 

CSS

@font-face { 
    font-family: "Penultimate"; 
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot"); 
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot?#iefix") format("embedded-opentype"), 
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.woff") format("woff"), 
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.ttf") format("truetype"), 
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.svg#Penultimate") format("svg"); 
} 

div { 
    font-family: Penultimate; 
} 
+1

你的代碼是在這裏工作(一對後,不是的jsfiddle)。 –

+0

它不在jsfiddle上工作,因爲字體沒有通過https加載,所以爲了安全而被阻止。只需打開控制檯。如果你可以分享你的網頁 – sniels

回答

3

的jsfiddle使用HTTPS,因此瀏覽器加載阻止出於安全原因的字體。您將在瀏覽器控制檯中看到錯誤。

Errors in console

火狐允許您通過點擊地址欄中的證書部分暫時忽略錯誤。

working fonts

+0

謝謝@Jan Tojnar! – mac