Question

我尝试使用@ font-face来替换字体的实例。这通常对我有用：

@font-face {
    font-family: 'Arial';
    font-weight: bold;
    font-style: italic;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    font-weight: bold;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    src: local('Times New Roman');
}

最终结果是Arial的实例被Times New Roman取代。实际上，这适用于运行Windows 10和Chrome 61.0.3163.100的单独计算机。

然而，在最近更新到62.0.3202.62之后，Arial仍然被Times New Roman取代，但粗体和斜体不再起作用。试图引用类似＆＃34; Times New Roman Bold＆＃34;没有工作，只是默认回Arial。在粗体和斜体src行之后放置!important会给出虚假粗体和虚假斜体。

旧的行为是错的吗？如果可能的话，通过CSS替换字体的正确方法是什么？

Answer 1

我们无法引用像“Times New Roman Bold”或“Arial Bold”这样的内容，看起来像是Chrome的错误，请阅读以下内容。

跟踪问题：https://bugs.chromium.org/p/chromium/issues/detail?id=627143，在＃25 drott中引用local（）的规范。
Here drott回答原因：

我们的本地匹配被破坏并使用姓氏进行匹配，而不是使用postscript名称
- Drott酒店
Here drott表示，之前的解决方法打破了Google Fonts对Android Chrome的期望。


这个改变实际上使得src：local（）处理更加正确，通过将样式排除在外，但确实打破了Google Fonts所期望的。

有两个问题：我们的src：local（）匹配被破坏，与全字体名称或postscript字体名称不匹配，即问题627143.

我们做了什么，我们将src：local（）与字体系列名称相匹配，另外我们考虑了拉伸，样式，重量请求（来自CSS样式，存储在FontDescription中）并将其输入到家庭匹配。

通过这种破坏的local（）匹配，Google字体的CSS设法使用本地（“sans-serif”）加上font-weight：bold和font-weight：100来匹配本地机器人变体，或者300。

我将部分恢复上述CL并恢复该错误，直到我以更持久的方式修复local（）匹配。
   - Drott酒店
相关提交。
- 上一个解决方法：https://chromium-review.googlesource.com/c/chromium/src/+/589270/3/third_party/WebKit/Source/core/css/LocalFontFaceSource.cpp
- 然后尝试修复Android Chrome上的Google字体问题：https://chromium-review.googlesource.com/c/chromium/src/+/708269/3/third_party/WebKit/Source/core/css/LocalFontFaceSource.cpp

Answer 2

首先，你为什么这样做？你不能使用

font-family: "Times New Roman";

在身体元素上？

Chrome更新突然中断@ font-face

2 个答案: