@ font-face失敗的原因是什麼？

我有一個簡單的例子，在那裏爲某種原因定義@字體面將只能用於鉻，未能在火狐，Safari工作和IE：@ font-face失敗的原因是什麼？

HTML ：

<body> 
    <div class="original-font"> 
    This is the original font 
    </div> 
    <div class="bold-font"> 
    This should be bold! But it is not in IE, Safari and FireFox 
    </div> 
</body>

CSS：

@font-face { 
    font-family: 'Lucida Bold Italic'; 
    font-style: italic; 
    font-weight: bold; 
    src: local('Lucida Sans Unicode'), local('Times New Roman'); 
} 

.original-font { 
    font-family: 'Lucida Sans Unicode'; 
} 

.bold-font { 
    font-family: 'Lucida Bold Italic'; 
}

根據規範（https://developer.mozilla.org/en/docs/Web/CSS/@font-face）它應該支持現代瀏覽器。這就是爲什麼，我懷疑css定義中缺少一些東西。

將不勝感激任何意見！

來源

2016-12-14 Anelook

你最有可能混淆一個字型有字體家族：

「龍力三世統一」是一個字體家族
「Lucida的粗斜體」 is a font face

總之，一個字體家族是一組字體。

@ font-face聲明加入某個自定義系列的字體。 src是字體文件的路徑，這可能是問題所在：

src：local（'Lucida Sans Unicode'），local（'Times New Roman'）;

這兩家字體系列被用作字型的src。

據推測，Chrome處理這個容易犯的錯誤，並且只要發現這種情況，就會使用來自家庭的'正常'字體。

所以，你大概意思是這樣的：

@font-face { 
    font-family: 'MyBoldFont'; 
    font-style: italic; 
    font-weight: bold; 
    src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic'); 
} 

.bold-font { 
    font-family: 'MyBoldFont'; 
}

每當文字是粗體，斜體和使用.bold的字體，你會看到你的自定義字體臉上顯示出來，這樣簡單例如：

<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.

Here it is as a fiddle.

來源

2016-12-14 15:29:32

也許你也會有與此相關的問題http://stackoverflow.com/questions/41147727/ho思路瓦特到附加字體重屬性-內部-A-字體定義換的-回退的字體 – Anelook

-1

@font-face { 
    font-family: myFirstFont; 
    src: url(font.woff); 
}

來源

2016-12-14 15:09:29 ArietM

@ font-face失敗的原因是什麼？

回答

相關問題