使用CSS3字體的正確方法是什麼？

有人可以幫我理解什麼是使用CSS3字體的正確方法。下面是一些font-face聲明，哪一個是正確的，爲什麼？使用CSS3字體的正確方法是什麼？

/* START OF SAMPLE CODE # 1 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: bold; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 1 */

=========

/* START OF SAMPLE CODE # 2 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFontBold'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFontBold', blah, blah, blah; 
    font-weight: normal; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 2 */

=========

/* START OF SAMPLE CODE # 3 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFontBold'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFontBold', blah, blah, blah; 
    font-weight: bold; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 3 */

這些代碼樣品中的差異，是這樣的「粗體「字體正在被聲明和使用。請告知，哪一個是正確的，爲什麼？ PS：我很抱歉有這麼長的問題/樣本。我只是想提供儘可能多的信息以避免混淆。

編輯1：儘管正如@Jukka在下面的答案中提到的那樣，邏輯方法是使用「代碼＃1」，但我剛剛檢查了Safari並且粗體顯示方式過於大膽Safari與其他瀏覽器相比，但如果我使用「代碼＃2」，則所有瀏覽器都呈現相同的效果，所以在使用不同的字體 - 面部聲明時，似乎會出現幕後發生的情況。所以在這一刻我看起來「代碼＃2」是要走的路，說什麼！

來源

2013-09-25 Mandeep

任何這個工作？ –

我用鉻和Firefox和IE8和他們三個都在工作，這就是爲什麼我很困惑哪一個使用！ – Mandeep

它工作嗎？ –

沒有一個代碼是正確的，因爲根據CSS語法，關鍵字bold和normal的引號不允許。否則，代碼1基於邏輯原則，因爲它指定了兩個普通和粗體的字體，它們顯然屬於同一個字體系列。其他代碼將每種字體聲明爲字體系列。謹慎使用，這種方法也適用。

主要的實際區別在於，使用邏輯方法（代碼1），即使對於所有元素，您也可以簡單地聲明font-family: WebFont, Foobar，並且粗體字將自動用於那些對其設置了font-weight: bold的元素（通過瀏覽器默認值，如h1或通過顯式設置）。這也意味着如果WebFont字體系列由於某種原因（如拒絕可下載字體的瀏覽器設置）而未使用，則將使用Foobar字體的適當字體（普通或粗體）。

來源

2013-09-25 07:32:45

感謝您指出了這一點，但這只是示例代碼中的一個錯字。 – Mandeep

使用CSS3字體的正確方法是什麼？

回答

相關問題