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

VS。只加载一个像这样的单一字体

@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-weight规则的font-style和@font-face声明以匹配每个字体的属性，并使用相同的{ {1}}每个规则的名称，我们将不再需要在CSS文件中过于具体。

您可以阅读更多here

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

1 个答案: