嵌入式字体样式 - 嵌入式字体风格VS CSS样式

我希望理解上的差异是在这样的网站中嵌入字体之间是什么：嵌入式字体样式 - 嵌入式字体风格VS CSS样式

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

我想有一个好处，否则你不会想加载更多资源。

来源

2016-09-21 Kevmon

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

TTF and OTF

他们在所有现代浏览器都支持，除了IE浏览器，用于它们只被部分支持。

WOFF

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

EOT

只有Internet Explorer支持的字体文件类型，适用于版本的Internet Explorer 8.0及以上

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

您可以阅读更多here

来源

2016-09-21 03:15:41 dippas

嵌入式字体样式 - 嵌入式字体风格VS CSS样式

回答

相关问题