没有变音符号的Webfont答案

【问题标题】：Webfont without umlaut没有变音符号的Webfont
【发布时间】：2023-04-03 07:55:01
【问题描述】：

我最近购买了一种字体，并希望使用网络字体将其嵌入到我的网站中。

现在的问题是：买了之后发现字体少了ä、ü、ö等变音符号，所以显示的是空格而不是（缺失的）字符。

有没有办法防止这种情况发生？就像告诉 css 为丢失的字符使用另一种字体？还是我必须自己编辑字体？

【问题讨论】：

粉笔体验，并购买包含您需要的字符的不同字体。
设置
有一种方法可以做到这一点，但它可能涉及大量额外的 HTML，所以你会讨厌它：将每个需要不同字体的字母封装在 <span class="other-font">ü</span>并更改该类的<span>s 的字体。
@MikeW：是的，我认为这是唯一的解决方案.. 我找到了另一种非常相似的字体，其中包含这些字符，所以我想我必须买那个..跨度>
@setek：我也想过类似的事情。但这几乎和我的标题使用无漫画漫画一样难看；）无论如何谢谢你的提示！

【解决方案1】：

因为除了重构字体文件之外没有“简单”或干净的解决方法，这里有一个小的 JS 脚本，用<span> 替换扩展的 ASCII 字符。 （只能针对确切的、必需的字符执行此操作，但是一旦您意外遇到另一个不受支持的字符，您最终可能会再次问自己同样的问题。）

JS 仅用于示例文本：

"Hêllo wörld. ÄÖÜßäöü".replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')

结果：

H<span class="arial">ê</span>llo w<span class="arial">ö</span>rld. <span class="arial">Ä</span><span class="arial">Ö</span><span class="arial">Ü</span><span class="arial">ß</span><span class="arial">ä</span><span class="arial">ö</span><span class="arial">ü</span>

jQuery:

$('.webfont').each(function(){
    this.innerHTML = this.innerHTML.replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
});

.webfont 的节点应该只包含文本，尽管它在大多数其他情况下也应该工作。

【讨论】：

【解决方案2】：

没有可接受的方法来防止这种情况。使用不同的字体。（您购买的字体可能有扩展版本，费用更高。）应选择字体，使其包含您在文本中可能需要的所有字符，至少是所有字母。

可以使用不同的技术为单词中的不同字母使用不同的字体（@font-face 范围设置是最优雅的，但浏览器支持有限）。但是，这意味着排版灾难。特别是如果文本包含例如“ü”和“u”，通常有明显的不匹配。

使用字体编辑器编辑字体本身在技术上是可行的，但通常是非法的，除非字体许可或适用法律中的版权豁免允许。

【讨论】：