嵌入式字体样式 - 嵌入式字体样式与 CSS 样式

Question

我希望了解在这样的网站中嵌入字体之间的区别：

@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;
}

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

Answer 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

嵌入式字体样式 - 嵌入式字体样式与 CSS 样式

Embedded Font Styling - Embedded Font Styles vs CSS Styling

css

fonts

font-face

webfonts