CSS -specifying多种字体的不同字符编码-
我希望允许将多种字体应用于动态生成的内容，这些内容可以有不同的字符编码。我已经使用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和字体不是特别有信心，所以希望我的问题已经被解释清楚了！
非常感谢，
我。
回答 2
Stack Overflow用户
发布于 2012-09-04 21:02:23
原则上，您可以使用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用于其余字符(主要用于拉丁字母)。
坏消息是，像往常一样，缺乏足够的浏览器支持。在这里火狐似乎是主要的问题:它根本不支持unicode-range。
问题中描述的方法也需要基于字符范围，因为JavaScript缺乏用于检查字符属性(如“脚本”属性)的内置工具。
如果每个标题的语言信息都可用(通常在设计良好的数据库中)，则应该将其包含在生成的lang文档中的lang属性中，然后您可以在样式化中使用这些属性。或者可以发出class属性，其中包含有关正确编码的脚本(书写系统)的信息。
然而，从排版的角度来看，我强烈建议在呈现类似项目(如唱片标题)的情况下，对所有书写系统使用相同的字体。这尤其适用于希腊语、西里尔语和拉丁语的“兄弟”手写体，它们共享许多字符形式。例如，希腊语小写omicron、西里尔文小写o和拉丁文小写o看起来应该完全相同。对于更多不同的脚本，问题不是那么严重，但例如，serif字体中的拉丁文文本与sans-serif字体中的希伯来语文本配对时看起来很奇怪。
Stack Overflow用户
发布于 2015-11-05 17:29:39
Jukka Korpela的回答真的拯救了我的一天。我想与感兴趣的人分享的是我们通过上面提到的unicode范围方法启用自定义字体的西里尔字符的实现。
通过使用下面的定义，您实际上不需要指定任何lang属性等。它主要做的是定义另一个字体文件，用于西里尔字符的unicode范围。
从我的角度来看，有趣的是，默认情况下，所有浏览器(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
和
https://stackoverflow.com/questions/12261754
复制相似问题
腾讯云开发者
