如何为同一个字体添加多个字体文件？
我正在查看 @font-face CSS 规则的 MDC 页面 ，但我不明白一件事。我有粗体、斜体和粗体+斜体的单独文件。如何将所有三个文件嵌入到一个 @font-face 规则中？例如，如果我有：
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
浏览器将不知道使用哪种字体作为粗体（因为该文件是 DejaVuSansBold.ttf），因此它将默认为我可能不想要的字体。如何告诉浏览器某种字体的所有不同变体？
I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have:
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
The browser will not know which font to be used for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don't want. How can I tell the browser all the different variants I have for a certain font?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
解决方案似乎是添加多个
@font-face规则，例如：顺便说一句，Google Chrome 似乎不知道
format("ttf") 参数，所以你可能想跳过它。（此答案对于 CSS 2 规范是正确的。CSS3 只允许一种字体-样式而不是逗号分隔的列表。）
The solution seems to be to add multiple
@font-facerules, for example:By the way, it would seem Google Chrome doesn't know about the
format("ttf")argument, so you might want to skip that.(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)
从 CSS3 开始，规范已发生变化，仅允许使用单个
font-style。逗号分隔列表（根据 CSS2）将被视为正常，并覆盖任何早期（默认）条目。这将使以此方式定义的字体永久显示为斜体。在大多数情况下，斜体可能就足够了，如果您仔细定义并坚持使用斜体，则不需要倾斜规则。
As of CSS3, the spec has changed, allowing for only a single
font-style. A comma-separated list (per CSS2) will be treated as if it werenormaland override any earlier (default) entry. This will make fonts defined in this way appear italic permanently.In most cases, italic will probably be sufficient and oblique rules won't be necessary if you take care to define whichever you will use and stick to it.
为了使字体变化正常工作，我必须颠倒 CSS 中 @font-face 的顺序。
To have font variation working correctly, I had to reverse the order of @font-face in CSS.
如今，2017-12-17。
我在 规格。
我在 chrome 中进行的测试总是有效，无论顺序如何。
nowadays,2017-12-17.
I don't find any description about Font-property-order‘s necessity in spec.
And I test in chrome always works whatever the order is.
如果您使用谷歌字体，我会建议以下内容。
如果您希望字体从本地主机或服务器运行，您需要下载文件。
不要下载下载链接中的 ttf 包，而是使用它们提供的实时链接，例如：
将 URL 粘贴到浏览器中，您应该会得到类似于第一个答案的字体声明。
打开提供的 URL，下载并重命名文件。
将更新后的 font-face 声明与 woff 文件的相对路径粘贴到 CSS 中，然后就完成了。
If you are using Google fonts I would suggest the following.
If you want the fonts to run from your localhost or server you need to download the files.
Instead of downloading the ttf packages in the download links, use the live link they provide, for example:
Paste the URL in your browser and you should get a font-face declaration similar to the first answer.
Open the URLs provided, download and rename the files.
Stick the updated font-face declarations with relative paths to the woff files in your CSS, and you are done.
我在 styles.less 中添加了这样的自定义字体。在这里，我在“src”中添加了多个 url 作为后备。
您可以在此处阅读更多内容： https:/ /developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers
I added a custom font like this to my styles.less. Here I have added more one url in 'src' as a fallback.
More you can read here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers
对于创建 React 应用程序，请参阅我的 其他SO在这里回答
css文件直接链接到您的public/index.html：css< /code> 通过 Js 文件进行捆绑：For Create React App see my other SO answer here
cssfile directly to yourpublic/index.html:cssfile via Js for bundling:如果您使用的是 Google 字体，我建议使用
@import url("@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@900&display=swap ');")并指定font-family: 'Saira Condensed', sans-serif;作为 CSS 规则。If you are using a Google Font, I suggest using
@import url("@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@900&display=swap');")and specifyingfont-family: 'Saira Condensed', sans-serif;as the CSS Rule.@font-face规则非常无情！您需要确保语法和格式描述符正确。请参阅W3C 规范。
在OP的情况下：
不会工作，因为正确的格式描述符是“truetype”而不是“ttf” - 而完全省略描述符会起作用（在大多数现代浏览器中） ）。
示例 1：正确的描述符
例 1.2：错误的描述符——尽管路径是正确的
另一个类似的语法错误是
format("opentype")而不是format("otf")。多种格式、旧版支持和过时格式
所有现代浏览器都支持最紧凑的
woff2格式。但是，您可能仍然需要 truetypes，特别是对于可能无法处理/解码 woff2 或 woff 等 Web 字体容器格式的本机应用程序或转换器（例如 pdf-conversion）。
字体源的顺序：从上到下
如果您需要旧支持，请确保堆叠字体源
最现代/紧凑到遗留如下：
多个源必须用“，”逗号分隔。
浏览器将选择第一个有效的字体文件。换句话说，如果您指定较大的“truetype”文件作为第一个 src，它将加载该文件，尽管它也可以处理更多的 comapct“woff2”候选文件。
（字体规则的顺序并不重要！）。
“Bulletproof @font-face 语法”
如果您需要支持过时的浏览器 Internet Explorer 或非常早期的 Webkit 浏览器 - 请查看 Paul Irish 的帖子
对于现代浏览器：摆脱
.eot和.svg因为它只是使您的规则更容易出现语法错误。例2.1：字体加载优先级
本地字体或网络资源
简而言之：始终放弃
local()方法，因为如果您需要在所有浏览器上提供一致的字体渲染，它是非常不可靠的。 （主要是它不可靠，因为字体系列可以有大量不同的字体名称 - 取决于操作系统和字体版本）。始终检查您的开发工具中是否有渲染/加载的字体
字体信息应在计算样式视图中显示“网络资源”。此外，网络选项卡应显示已加载字体文件的条目。
如果没有 - 您会看到本地安装的字体并非在所有设备上都可用。
可变字体
当您使用可变字体时，您可以减少
@font-face规则的数量。通常您最多需要 2 条规则（一条用于常规样式，另一条用于斜体样式）注意：我们需要通过添加 2 个值（以空格分隔）来指定字体变体范围：
Italic、Oblique、Slanted
Italic 和 Oblique 指的是印刷分类。斜体通常具有明显不同的字母形状 - 例如，常规（直立）样式中的两个存储“a”，而不是许多字体中的一个存储设计。
倾斜是指一种设计概念，其中“斜体”看起来更像是倾斜的字母设计 - 事实上它们仍然是手动设计的，但类似于直立设计。
font-style:oblique已经过时了 – 只需使用italic即可。“倾斜”与可变字体更相关。某些字体包含倾斜角度的无缝插值，可以用作斜体的替代品
@font-facerules are quite unforgiving!You need to ensure the syntax and format descriptors are correct. See W3C specs.
In case of the OP:
wouldn't work as the correct format descriptor is "truetype" not "ttf" - whereas omitting the descriptor completely would work (in most modern browsers).
Example 1: correct descriptor
Example 1.2: incorrect descriptor – though paths are correct
Another similar syntax error would be
format("opentype")instead offormat("otf").Multiple formats, legacy support and obsolete formats
All modern browsers support the most compact
woff2format.However, you may still need truetypes especially for native applications or converters (e.g pdf-conversion) that may not be able to handle/decode web font container formats like woff2 or woff.
Order of font sources: from top to bottom
In case you need legacy support make sure to stack the font sources from
most modern/compact to legacy like so:
Multiple sources must be separated by a "," comma.
A browser will choose the first valid font file. In other words if you specify the larger "truetype" file as the first src it will load this file although it can also handle the more comapct "woff2" candidate.
(The order of the font-face rule doesn't matter!).
"Bulletproof @font-face Syntax"
In case you need to support outdated browsers internet explorer or very early webkit browsers - have a look at Paul Irish's post
For modern browsers: get rid of
.eotand.svgas it it only makes your rule more prone to syntax errors.Example 2.1: font loading priority
Local fonts or network resource
In short: always ditch the
local()method as it is highly unreliable if you need to provide a consistent fonts rendering across all browsers. (Mainly it's unreliable because a font-family can have a plethora of different font names – depending on OS and font version).Always check your DEV tools for rendered/loaded fonts
The font info should show a "network resource" in the computed styles view. Besides the network tab should show entries for loaded font files.
If not - you're seeing a locally installed font that won't be available on all devices.
Variable Fonts
When you're using a variable font you can reduce the number of
@font-facerules. Usually you need at max 2 rules (one for regular and another for italic style)Note: We need to specify a font-variant range by adding 2 values – separated by a space:
Italic vs Oblique vs Slanted
Italic and Oblique refer to typographic classifications. An italic usually has distinctively different letter shapes - e.g a two storage "a" in regular (upright) style as opposed to a one storage design in a lot of fonts.
Oblique refers to a design concept where "italics" rather look like skewed letter designs – in fact they are still manually designed but similar to the upright design.
font-style:obliqueis rather obsolete – just useitalic."slanted" is more relevant to variable fonts. Some fonts contain a seamless interpolation of the slanting angle that can be used as a replacement for italics