css - 如果字体存在，CSS 可以设置适当的属性吗？

Question

我想在我的 Web 应用程序中使用不同的字体。由于它们的大小不相等，我想在 CSS 中做一些类似这样的伪代码：

if (exists(font1))
{
   font-size: 9pt; font-family: font1;
}
else
{
   font-size: 12pt; font-family: font2;
}

是否可以？什么是最好和正确的解决方案？如何为某种字体定义字体大小并为下一个字体定义另一个字体大小？

Answer 1

CSS一般没有条件或其他动态结构。

您的问题是通过使用所谓的“字体堆栈”解决的。您font-family使用逗号分隔的字体名称列表进行声明。客户端浏览器现在从他可用的列表中选择字体。这就是为什么创建好的字体堆栈是一项棘手的任务（因为它们应该看起来相似或至少具有相似的字母间距/行高）。如果你在谷歌上搜索 Web 字体堆栈，你会从专业的字体专家那里得到一些关于该主题的好文章，他们已经为你创建了漂亮的字体堆栈。

现在的另一种选择是通过@font-face声明提供您想要的字体作为可下载字体。但是请记住：

• 您需要多种格式来支持所有浏览器
• 他们为可能与手机相关的页面加载增加了额外的权重
• 您需要使用该字体或使用免费字体的权利（Google 提供了一项服务，您可以从各种免费字体中进行选择）

Answer 2

您可以为此使用 javascript 语句。或者您可以为您的文本分配不同的 id。例如：-

<div id="font1"><p>Some Text</p></div>

然后在你的css文件中： -

#font1 p{
   font-family:sans-serif;
   font-size:10px;
}

这样您就可以很好地为 Web 应用程序中的不同文本分配不同的字体...