Web字体并提供备用字体
当使用@font-face使用web fonts我想知道使用备用字体的推荐方法是什么？
例如，如果我使用的是粗体的网页字体，例如：
@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;
只是想知道，因为如果你没有指定粗体，那么如果网页字体失败，他们会得到Arial，但它不会大胆。
您大概使用FontSquirrel生成的字体文件和CSS文件。 他们的方法的问题是，每个特定的字体（如Open Sans Regular和Open Sans Bold）都表示为独立的字体系列，字体权重设置为正常。 这意味着，而不是像<p>foo <strong>bar</strong>和像p { font-family: Open Sans, Arial }这样的简单CSS标记（让浏览器默认strong为粗体字体并从Open Sans family），您将被迫明确设置字体。 这意味着使用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; }
然后，对于那些应该出现在Open Sans Bold中的元素，您只需使用font-weight: bold （或默认具有此类效果的HTML标记，如strong ， b ， th ， h1至h6 ）。
按照您描述的方式进行操作似乎也适用于大多数浏览器，但我不会指望它。 一旦您在@font-face中将字体声明为正常重量，则在该字体中设置font-weight: bold可能会导致a）失败，因为重量不匹配或b）作为字体采用的字体算法粗体的起点，导致双粗体。 如果我没有弄错，b）Safari上会发生什么（Win 7）。
你已经正确地突出了网络字体的'新时代'的一个问题，这篇博客文章讨论了它并提出了一个解决方法http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-字体/
相关片段
问题二比第一个大得多。 考虑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; }