4

我想允许将多种字体应用于可以具有不同字符编码的动态生成的内容。我已经使用了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 和字体不是特别有信心，所以希望我的问题已经得到了清楚的解释！

确实谢谢

一世。

4

2 回答 2

7

原则上，您可以使用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 以上的字符（例如，用于希腊语和西里尔文），将 Arial Unicode 用于其余字符（主要用于拉丁字母）。

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

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

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

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

于 2012-09-04T13:02:22.680 回答
1

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

通过使用以下定义，您实际上不需要指定任何语言属性等。它基本上所做的是定义另一个用于西里尔字符的 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 范围

和

Unicode 中的西里尔字母

于 2015-11-05T09:29:39.293 回答