正確定義@ font-face中的font-family CSS規則

我最近遇到了@font-family CSS規則，因爲我正在尋找在我的網站上使用Web字體。正確定義@ font-face中的font-family CSS規則

來到這一點，我已經看到了@ font-family CSS代碼的兩個變種，其中你可以看到下面：

@font-face { 
    font-family: 'Droid Serif'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Regular-webfont.eot'); 
    src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifRegular'), 
    url('DroidSerif-Regular-webfont.woff') format('woff'), 
    url('DroidSerif-Regular-webfont.ttf') format('truetype'), 
    url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); 
} 

@font-face { 
    font-family: 'Droid Serif'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: italic; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
}

，這是另一種：

@font-face { 
    font-family: 'DroidSerifRegular'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
} 

@font-face { 
    font-family: 'DroidSerifItalic'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
}

比較我已經評論過的行/* NOTE THIS LINE */

第一個變體是Google Web Fonts，而第二個變體是Font Squirrel。那麼，這兩個錯誤之一呢？（只是想確認一下，雖然兩者都是非常可靠的消息來源。）

如果可以接受的話，哪一個我會更好？

來源

2012-04-28 its_me

我被教過，你永遠不應該在'font-family'屬性中指定字體樣式。但是，那可能是我的知識已經過時了。 – 2012-04-28 14:51:04

第一個例子雖然很難相信，但是是正確的;請注意Droid Serif Regular是如何被聲明爲字體重量正常和字體風格正常的......您如何期望顯示常規字體。第二個聲明，它在Droid Serif Italic中調用，並將其設置爲font-style：italic;這允許你在一個系列中使用多種字體。如果你想添加一個粗體字體，你應該使用相同的@ font-face規則，除非你改變font-weight：bold，而留下font-style：normal並聲明相同的字體系列。

fontsquirrel在呈現@ font-face規則方面確實做得很好，實際上我已經閱讀過關於這種技術的知識。驚訝它沒有被執行。你可以在這裏閱讀更多關於這個：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

來源

2012-04-28 15:45:58 albert

-2

我使用Google Web Fonts的選項來使用 @import 選項。加載可能需要一些時間，但如果性能是你想要的，你可以自己託管字體。至於字體松鼠，我不太熟悉它，但我會檢查出來。

來源

2012-04-28 15:20:51 PacoDev

正確定義@ font-face中的font-family CSS規則

回答

相關問題