Web字體和提供後備字體

Question

當使用web fonts時使用@font-face我想知道什麼是使用後備字體的推薦方法？

一樣，例如，如果我使用Web字體，這是大膽的，如：

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

現在，當你調用這個你顯然只是這樣做：

font-family: OpenSansBold; 

不過我想知道提供後備字體，比如字體的下載是否因任何原因失敗。

顯然，這是很容易與正常體字體（非粗體/非斜體），如下做..

font-family: OpenSansRegular, Arial; 

不過，我想知道是關於什麼的，當字體爲粗體或斜體。

它是否建議這樣的事情，它不會影響網絡字體？

font-family: OpenSansBold, Arial; 
font-weight: bold; 

只是想知道，因爲如果你沒有指定大膽那麼如果Web字體失敗了，他們會得到宋體，但它不會是大膽的。

Answer 1

您大概使用FontSquirr生成的字體文件和CSS文件埃爾。他們的方法的問題是，每個特定的字體（如Open Sans Regular和Open Sans Bold）都表示爲獨立的字體系列，字體權重設置爲正常。這意味着您不必像<p>foo <strong>bar</strong>這樣的標記和簡單的CSS如p { font-family: Open Sans, Arial }（讓瀏覽器默認strong爲粗體字，並從Open Sans系列中選擇合適的字體），您將被迫顯式設置字體。這意味着設置字體系列和字體權重，隱含地使用font-family屬性值。

您需要調整CSS以獲得更好的方法。你會使用相同的字體系列，但不同的重量在@font-family規則，並在font-family規則，你只會設置的家庭：

@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-bold-webfont.eot'); 
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-bold-webfont.woff') format('woff'), 
     url('opensans-bold-webfont.ttf') format('truetype'), 
     url('opensans-bold-webfont.svg#OpenSans') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSans') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
* { font-family: open_sans, Arial; } 

然後你只需使用具有這樣的font-weight: bold（或HTML標記默認效果，如strong,b,th,h1到h6），這些元素應顯示爲Open Sans Bold。

按照您描述的方式執行此操作似乎也適用於大多數瀏覽器，但我不會指望它。一旦在@font-face中將字體聲明爲正常體重，那麼在該字體的文本上設置font-weight: bold可能會導致a）失敗，因爲權重不匹配，或者b）將字體視爲算法粗體的起點，以雙粗體顯示。如果我沒有弄錯，b）Safari上會發生什麼（Win 7）。

Answer 2

你已經正確地強調了一個問題，與Web字體的「新時代」，這個博客帖子討論，並提出瞭解決方法http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

相關片段

問題二號比顯著更大首先。考慮FF恩佐，它沒有400（甚至500）的重量。在某些情況下，它的Light（300）重量可能對於小型車身來說有點太薄，所以我們使用600重量。啊，那看起來不錯。

但它不好！因爲如果該字體無法顯示並且我們回退到其他字體，則該回退字體將呈現其重量爲600的重量;換句話說：大膽。

解決方法？

有一種解決方法，它是FontsLive在爲用戶生成的CSS中使用的方法：您單獨聲明每個權重而不是整個系列。他們的代碼看起來有點像這樣：

CSS代碼：

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; } 
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; } 

更新：

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

然後像（如你所說）：

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }