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

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

原则上,您可以使用unicode-rangeCSS3字体的属性来执行此操作(就像这里简单地使用.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以上的字符(例如,希腊字母和西里尔字母)和其他字母(主要是拉丁字母).

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

问题中描述的方法也需要基于字符范围,因为JavaScript缺少用于检查字符属性的内置工具(例如"脚本"属性).

如果有关每个标题语言的信息可用(通常在设计良好的数据库中),则应将其包含在lang属性中生成的HTML文档中,然后可以在样式中使用.或者class可以发出属性,包含有关正确编码的脚本(写入系统)的信息.

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