Question

我正在使用缺少特殊字符的自定义字体：“@”，但是虽然我在元素的font-family上添加了更多字体，但缺少的字符不会被替换。不应该显示？

@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

我在元素的font-family上添加了更多字体，缺少的字符未被替换。不应该显示

不，它不会。当找不到第一个或第二个字体时，使用多个字体名称很有用，然后浏览器看起来是第三个字体。

@字符集中似乎不存在mainFont符号字符。

Answer 2

如果缺少整个字体，指定多个字体系列会指示浏览器查找备选方案。它不适用于单个字符。

您必须将字符添加到字体中，或者在使用@字符时使用其他字体。

Here是一个可能有帮助的开源Windows字体编辑器列表。

作为一个非常糟糕的替代方案，您可以使用jQuery在文档加载时查找所有@字符，并在其周围包含具有不同字体系列的范围。但这可能会导致用户屏幕闪烁。

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

2 个答案: