嵌入式字体样式 - 嵌入式字体样式与 CSS 样式 [重复]答案

【问题标题】：Embedded Font Styling - Embedded Font Styles vs CSS Styling [duplicate]嵌入式字体样式 - 嵌入式字体样式与 CSS 样式 [重复]
【发布时间】：2017-01-29 03:15:15
【问题描述】：

我希望了解在这样的网站中嵌入字体有什么区别：

@font-face {
    font-family: 'Kulturista Medium';
    src: url('fonts/Kulturista Medium.eot');
    src: local('☺'), url('fonts/Kulturista Medium.woff') format('woff'), url('fonts/Kulturista Medium.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Kulturista Semibold';
    src: url('fonts/Kulturista Semibold.eot');
    src: local('☺'), url('fonts/Kulturista Semibold.woff') format('woff'), url('fonts/Kulturista Semibold.ttf') format('truetype'), url('fonts/Kulturista Semibold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Kulturista Semibold Italic';
    src: url('fonts/Kulturista Semibold Italic.eot');
    src: local('☺'), url('fonts/Kulturista Semibold Italic.woff') format('woff'), url('fonts/Kulturista Semibold Italic.ttf') format('truetype'), url('fonts/Kulturista Semibold Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

对比像这样只加载一种字体

@font-face {
    font-family: 'Kulturista';
    src: url('fonts/Kulturista.eot');
    src: local('☺'), url('fonts/Kulturista.woff') format('woff'), url('fonts/Kulturista.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

和 CSS 样式

body {
  font-family: 'Kulturista', Fallback, sans-serif;
  font-style: italic;
  font-weight: bold;
}

我想这是有好处的，否则您不会想要加载更多资源。

【问题讨论】：

标签： css fonts font-face webfonts

【解决方案1】：

浏览器读取不同类型的字体，因此通过使用它们，您可以覆盖所有浏览器，跨浏览器

TTF and OTF

所有现代浏览器都支持它们，但仅部分支持 Internet Explorer 除外。

WOFF

几乎所有浏览器都支持它，除了旧版本的 Android 浏览器和旧版本的 iOS Safari。

EOT

是仅 Internet Explorer 支持的字体文件类型，适用于 Internet Explorer 8 及以上版本

关于您的主要问题，使用第一个示例是最好的方法，因为更改每个 @font-face 规则的 font-weight 和 font-style 声明以匹配每种字体的属性，并为每个规则使用相同的 font-family 名称，我们将不再需要在 CSS 文件中过于具体。

您可以阅读更多here

【讨论】：