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-range 来做到这一点。 CSS3 字体的属性，像这样(为了简单起见，这里只使用 .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 用于其余字符(主要用于拉丁字母)。

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

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

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

但是，从排版的 Angular 来看，我强烈建议在呈现可比元素(如记录标题)的上下文中为所有书写系统使用相同的字体。这尤其适用于共享许多字符形式的“兄弟”脚本希腊文、西里尔文和拉丁文。例如，希腊小 omicron、西里尔小 o 和拉丁小 o 应该看起来完全一样。对于更多不同的脚本，问题不是那么严重，但是例如衬线字体中的拉丁文本与 sans-serif 字体中的希伯来文本配对时看起来很奇怪。