Question

我遇到一些CSS问题。目前我正在使用@fontface工作正常和花花公子。然而，对于它没有实现的时间，我已经实现了其他字体，但是我想要将它们的样式设置得有点不同。例如，如果显示Rockwell，我希望将font-weight设置为粗体。但不是如果它是Times New Roman。此外，我只喜欢“字母间距：-4px;”如果正在显示Times New Roman，则申请。

这甚至可能吗？如果是这样，请协助一些代码。

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }

Answer 1

你已经表达了清楚，不要担心。

我认为没有直接解决方案，但在某些情况下，您可以使用此解决方法。

嵌入字体。
检测您是否成功（http://www.lalit.org/lab/javascript-css-font-detect/)<< li>
如果是/否则添加到<html> class="fontName"属性。
在CSS中添加特殊声明，如.fontName body { font-weight:bold; } - 准备好它意味着很多工作。特别是粗体 - 请记住<strong>的样子。
祝你好运;）

因为每个解决方法都有一些问题 - 比如JS可用性等等。也许它会对你有用。

Answer 2

你要做的事情肯定是可能的。为了使您的脚本能够在您编写脚本时工作。您需要按照以下步骤操作：

将字体上传到CSS目录（如果您想要托管字体的那个）。（你不能只调用ChunkFive字体而不将字体上传到你的CSS所在的目录中）

在您计划使用该字体的所有其他CSS样式上指定@ font-face。

 @font-face { 
     font-family: "ChunkFive"; 
     src: url('chunkfive.ttf');   // Or whatever the font name is
 }

完成步骤1和2后，您可以像上面指定的那样调用您的字体：

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}

有关font-face和CSS3字体的更明确指南，我建议您阅读这篇非常全面且内容丰富的博文：

http://webdesignerwall.com/general/font-face-solutions-suggestions

干杯和好运

Answer 3

使用两个类，每个字体一个

.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }

然后在您的HTML中，使用它们

<h1 class="font1">...</h1>
<div class="font2">...</div>

使用@fontface，如何将不同的样式应用于不同的字体系列？

3 个答案: