自定义字体 - 特殊字符不显示

Question

我使用的自定义字体缺少特殊字符：“@”，但是尽管我在元素的字体系列上添加了更多字体，但缺少的字符并未被替换。不应该显示吗？

@font-face {
    font-family: 'mainFont';
    src: url('fonts/font1.eot');
    src: local('☺'), url('../fonts/font1.svg') format('svg'), url('fonts/font1.woff') format('woff'), url('fonts/font1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

&

.text {
    font-family:"mainFont", Verdana, sans-serif;
}

html

<span class="text">email @</span>

Answer 1

指定多个字体系列会指示浏览器在缺少整个字体时寻找替代字体。它不适用于单个角色。

您必须将该字符添加到您的字体中，或者在使用

@

字符时使用不同的字体。

这里是可能有帮助的开源 Windows 字体编辑器列表。

作为一个非常蹩脚的替代方案，您可以使用 jQuery 在文档加载时查找所有

@

字符，并在它们周围包裹一个具有不同字体系列的跨度。但这可能会导致用户屏幕闪烁。

Answer 2

我在元素的字体系列上添加了更多字体，但缺少的字符未被替换。不是应该显示吗

不，不会。当找不到第一个或第二个字体时，使用多个字体名称非常有用，然后浏览器会显示第三个字体。

您的

@

字符集中似乎不存在

mainFont

符号字符。

Answer 3

与上述答案相矛盾的是，在接下来的十年里，这种情况发生了变化。如https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

中所述

font-family 属性指定字体列表，从最高优先级到最低优先级。字体选择不会停止在用户系统上列表中的第一个字体处。相反，字体选择一次选择一个字符，因此，如果可用字体没有所需字符的字形，则会尝试后一种字体。当某种字体仅提供某些样式、变体或大小时，这些属性也可能会影响选择哪个字体系列。