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

【问题标题】：Can CSS set appropriate properties if a font exists?如果字体存在，CSS 可以设置适当的属性吗？
【发布时间】：2013-02-25 23:00:04
【问题描述】：

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

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

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

【问题讨论】：

您是否尝试设置一个条件 JavaScript 语句来控制您的 CSS？
不，我没有。这是一个好方法吗？我该怎么做？
让我问你，font1什么时候存在？仅当页面上存在 font1 时，您才需要页面上存在某种 ID 或类或属性。
你不能用纯 CSS 做到这一点，用 JavaScript 是否值得做是值得怀疑的。
这是一个很好的问题，因为即使它们的大小相同，字体也会有很大的不同。但是，我想不出一种 CSS 方法来做到这一点。

标签： css fonts exists

【解决方案1】：

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

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

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

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

【讨论】：

还应注意，应谨慎使用自定义字体，并避免在大部分文本中使用。 superuser.com/questions/547743/…

【解决方案2】：

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

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

然后在你的css文件中：-

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

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

【讨论】：

在这种情况下 OP 将使用哪些 JavaScript 条件语句？
我的意思是说创建一个 div 并为其分配 id 然后使用 document.getElementById("idname").style 更改字体