Question

我想允许将多种字体应用于可以具有不同字符编码的动态生成的内容。我使用font-face方法修改CSS，如下所示：

.ResultsTitleClass{ font-family: 'custom-font', Arial Unicode MS, Arial, verdana; !important ; }

@font-face {
font-family: 'custom-font';
    src: url('tt0596m0-webfont.eot');
    src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
         url('tt0596m0-webfont.woff') format('woff'),
         url('tt0596m0-webfont.ttf') format('truetype'),
         url('tt0596m0-webfont.svg#custom-font') format('svg');
font-weight: normal;
font-style: normal;
}

我的理解是font-face可以指定自定义字体和后备列表。但是，我的自定义字体的目的是处理记录标题，包括希腊语，俄语，希伯来语收缩，我不希望这通常适用于罗马语脚本语言（使用Arial）。有人建议我写一些客户端javascript来读取标题，并寻找扩展的Unicode字符或编码字符。如果找到一些，则更新应用的CSS类。但是，我想考虑不同的解决方案。有没有替代解决方案？

我对CSS和字体不是特别有信心，所以希望我的问题已经清楚解释了！

非常感谢，

予。

Answer 1

原则上，您可以使用CSS3字体的unicode-range属性来执行此操作（就像这里简单地使用.ttf）：

@font-face {
  font-family: customFont;
  src: local(Arial Unicode MS);
}
@font-face {
  font-family: customFont;
  src: url('tt0596m0-webfont.eot');
  src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
       url('tt0596m0-webfont.woff') format('woff'),
       url('tt0596m0-webfont.ttf') format('truetype'),
       url('tt0596m0-webfont.svg#custom-font') format('svg');
  unicode-range: U+370-FFFF;
}

这意味着customFont实际上是一个复合字体，使用你的字体来表示U + 0370以上的字符（例如，希腊语和西里尔字母）和其余的Arial Unicode（主要是拉丁字母）。 / p>

坏消息是，经常缺乏足够的浏览器支持。 Firefox似乎是主要的问题：它根本不支持unicode-range。

问题中描述的方法也需要基于字符范围，因为JavaScript缺少用于检查字符属性的内置工具（例如“脚本”属性）。

如果有关于每个标题的语言的信息（通常是在设计良好的数据库中），它应该包含在lang属性中生成的HTML文档中，然后您可以在样式中使用它们。或者可以发出class个属性，包含有关正确编码的脚本（书写系统）的信息。

但是，从排版的角度来看，我强烈建议在提供类似项目（如唱片标题）的上下文中为所有书写系统使用相同的字体。这尤其适用于希腊语，西里尔语和拉丁语的“兄弟”脚本，它们共享许多字符形式。例如，希腊小omicron，西里尔小o和拉丁小o应该看起来完全一样。对于更多不同的脚本，问题并不严重，例如当用无衬线字体的希伯来文本配对时，衬线字体的拉丁文字看起来很奇怪。

Answer 2

Jukka Korpela的回答真的救了我的一天。我想与感兴趣的人分享的是我们用于通过上述unicode-range方法启用自定义字体的西里尔字符的实现。

通过使用下面的定义，你真的不需要指定任何lang属性等。它基本上做的是定义另一个字体文件用于西里尔字符的unicode-range。

有趣的观察是，默认情况下，即使文档中没有任何西里尔字符，所有浏览器（IE，FF，Safari）都会加载两种字体文件。只有Chrome会根据需要加载其他西里尔字体文件。这意味着在遇到定义的unicode范围的实例之前它不会加载字体。

/*
 CustomFont Latin
 */


@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
/*
 CustomFont Latin
 */

/*
 CustomFont Cyrillic
 */

@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0400-04FF;
}

/*
 CustomFont Cyrillic
 */

一些有用的阅读材料：

developer.mozilla.org - unicode-range

和

Cyrillic script in Unicode

CSS - 为不同的字符编码指定多种字体 -

2 个答案: