logo标签列表

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

htmlcsstypography
4
我在处理一些CSS时遇到了问题。 目前我正在使用@fontface，它很好用。 但是有时候它不能正常工作，所以我实现了其他字体，但我想对它们进行不同的样式设定。 例如，如果显示Rockwell字体，则希望将字体加粗。但如果显示Times New Roman，则不需要加粗。 此外，只想在显示Times New Roman时应用“letter-spacing：-4px;”。 这种情况是否可行？如果可以，请提供一些代码帮助。
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }
你能提供一下你使用@fontface的CSS吗？ - mgraph
1
@font-face { font-family: 'Chunkfive'; src: url('../fonts/Chunkfive.otf'); src: local('☺'), url('../fonts/Chunkfive.otf') format('opentype'); font-weight: normal; font-style: normal; } - user1108675
使用@font-face，您可以按照iamallberg的方式重新定义Times-New-Roman并添加一些额外的样式。 - Gerben
3个回答
1

你表达得很清楚，不用担心。

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

  1. 嵌入字体。
  2. 检测是否成功（http://www.lalit.org/lab/javascript-css-font-detect/）
  3. 如果是/否，则将其添加到<html> class="fontName"属性中。
  4. 在CSS中添加特殊声明，例如.fontName body { font-weight:bold; } -准备好意味着要做很多工作。特别是加粗 - 要记住<strong>看起来像什么。
  5. 祝您好运 ;)

像每个解决方法一样，它也存在一些问题-例如JS可用性等。也许对您有用。

0
你想要做的事情肯定是可以实现的。为了让你的脚本按照你写下的方式工作，你需要按照以下步骤进行操作：
  1. 将字体上传到CSS目录中（如果您想在那里托管字体）。 （您不能只是调用ChunkFive字体，而不将字体上传到基于代码的CSS所在的目录中）

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

     @font-face { 
     font-family: "ChunkFive"; 
     src: url('chunkfive.ttf');   // 或者是字体名称
 }

完成第一步和第二步后，您可以按照上面指定的方式调用字体：

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

如果想要更深入地了解font-face和CSS3字体，我建议阅读这篇非常详尽和有用的博客文章：

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

祝你好运并加油！

也许我在原始写作中表达不够清晰。嵌入Chunkfive字体并不是问题，这只是背景信息，用于解释我的具体问题所在。我想做的是以不同的样式来设置替换字体。例如，如果是Chunkfive字体，则不需要字母间距，但如果显示的字体是Times New Roman，则希望将字母间距设置为-4px。 - user1108675
0
使用两个类，一个用于每种字体。
.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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接