@ font-face在任何瀏覽器上都不起作用

有人可以幫助我，我正在努力使@字體工作。我已經嘗試了一切，我知道我可能錯過了一些愚蠢的東西。@ font-face在任何瀏覽器上都不起作用

有誰能告訴我我做錯了什麼嗎？

@font-face { 
 
    font-family: "Asbah"; 
 
    src: url('http://www.dafont.com/asbah.font.ttf') format ('truetype'), 
 
    url('http://www.dafont.com/asbah.font.woff2') format('woff2'), 
 
    url('http://www.dafont.com/asbah.font.woff') format('woff'), 
 
    p { 
 
    font-family: 'Asbah'; 
 
    font-size: 12px; 
 
    }

<p> 
 
    Hallo this is font Asbah...which is noooot workingggg 
 
<p>

來源

2017-09-22 Liezle

下載這些字體的本地系統和嘗試。當我們在給url瀏覽器輸入字體時返回404錯誤。 –

這些URL返回404，這可能是原因嗎？ –

使用此：

@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 */ 
}

不同的瀏覽器使用不同的字體格式。如果你沒有在這個網站上，你的車的一些格式生成所有：https://transfonter.org/

看看這個技術洞察力：https://css-tricks.com/snippets/css/using-font-face/

來源

2017-09-22 12:08:48