CSS，如果找不到字体并使用替代字体，则自动更改大小等样式

如果无法加载或找不到我使用的字体，将使用替代字体。如果是这样，我需要更改一些其他样式，如

字体大小

，

字母间距

，

字体大小

，等等

例如：

div {
      font-family:"Lemon",sans-serif;
    }

这里的Lemon字体很厚，所以我设计这种字体的方式可能不适合其他字体。因此，如果无法加载第一个指定的字体，我如何相应地更改替代字体的样式？

使用纯CSS，您不能。一种选择是使用javascript来修改样式，然后相应地调整样式

比如：

$（文档）.ready（函数（）{
font.setup（）；//在DOM就绪时运行安装程序
如果（！font.isInstalled（“Lemon”））{
document.getElementById（“示例div”）.style.fontwweight=“900”；
}
});

---

这将使用必须包含在页面中的字体。

警告：此方法应能够检测是否加载了任何非等距字体

似乎无法单独使用CSS来感知实际使用的字体。从@Eddie Reeder answer中突出显示的font.js以及我们可以根据另一种字体测量所需字体的想法。我选择了一种单空格字体进行测试，一组窄字符（I）最有可能与所需字体不同。 像这样的代码（我特意解释清楚是怎么回事）可能放在头部或身体的开头。当然，它可以放在一个函数中，在开始时调用，和/或在设置所需脚本后删除其测试div，和/或设置CSS变量，如果这比使用两个单独的CSS样式文件更有意义的话

<div id="maybeOurFont" style="font-family: Lemon, monospace; font-size: 100px; position: absolute; left: -9999px; top:0;">iiiiiiiiiiiiiiiiiiii</div>
<div id="testFont" style="font-family: monospace; font-size: 100px; position: absolute; left: -9999px; top:0;">iiiiiiiiiiiiiiiiiiii</div>
<script>
  const pathToLemonStyle = "lemonstyle.css"; //replace with your path
  const pathToNoLemonstyle = "nolemonstyle.css"; // ditto
  const lemonLength = document.getElementById("maybeOurFont").offsetWidth;
  const monoLength = document.getElementById("testFont").offsetWidth;
  let useThisStyle = pathToLemonStyle;
  if ( lemonLength == monoLength ) {
    useThisStyle= pathToNoLemonstyle;
  }
  document.head.append('<style src="' + useThisStyle + '"></style>');
</script>

IIIIIIIIII
iiiiiiiiiiiiiiiiiiii
const pathToLemonStyle=“lemonstyle.css”//替换为您的路径
const pathToNoLemonstyle=“nolemonstyle.css”；//同上
const lemonlengh=document.getElementById（“MaybourFont”）.offsetId；
const monolingth=document.getElementById（“testFont”）.offsetWidth；
让我们使用ThisStyle=pathToLemonStyle；
if（lemonLength==单体长度）{
使用ThisStyle=pathToNoLemonstyle；
}
文件。标题。附加（“”）；

到目前为止，我发现的唯一一种方法是非常旧的，而且可能会很耗时，[link]@AHaworth谢谢，但是，如果可以使用css或JS来完成，那就更好了。老实说，脚本太小了。您可以将代码复制到自己的JS文件中，使之成为普通的JS…：）是的，看起来要做到这一点的唯一方法，无论是在这里还是在旧的github fontunstack中，基本上都是查看MMM字符串加上其他字符的宽度，看看它是否与Lemon或其他所需字体相同。看起来有点粗制滥造，但在“胖”字体和“瘦”字体的情况下可能会起作用。可惜它不能在CSS中完成。也许使用固定字体进行比较？很高兴知道我们不需要jQuery或其他插件，但会有相同宽度的字体。谢谢。会不会有固定宽度的字体，单间距的。大多数字体不是这样的，所以这种方法应该可以检测任何非等距字体。我以为Lemon不是等距的。我会在答案中加上这个警告。@Haworth Yes lemon不是等距字体，但我们的想法是不要使用等距字体作为替代字体，并检查是否使用了第一种字体。其思想是，如果不使用第一种字体，则相应地设置第二种字体的样式，这可能是单间距字体，也可能不是单间距字体。单间距字体仅用于检查lemon是否存在，一旦选中，我们要么加载处理lemon可用的css文件，要么加载处理lemon不可用的css文件。当然，如果您在几个地方只有非常微小的差异，那么您可能希望加载一个通用的css文件，并添加一些与非lemon情况不同的css。