嵌入式字體樣式 - 嵌入式字體風格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樣式

回答

相關問題