如何在一个页面中使用两种字体系列？

Question

我的网页有两种语言，英文和中文，我只能将一种字体系列应用于一种语言，如何同时将两种字体系列应用于英文和中文？有什么想法吗？

@font-face {
  font-family: 'Kavoon';
  font-style: normal;
  font-weight: 400;
  src: url(http://example.com/myfonts.eot);
  src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://example.com/myfonts.eot) format('embedded-opentype'), url(http://example.com/myfonts.woff) format('woff');
}

如何更改此定义以支持我的要求？

Answer 1

您可以为不同的字体创建另一种字体。

英语：

 @font-face {
font-family: EnglishFont;
src: url(source_to_english.woff);
}

中文：

 @font-face {
font-family: chineseFont;
src: url(source_to_chinese.woff);
}

其他：

 @font-face {
font-family: OtherFont;
src: url(source_to_other.woff);
}

Answer 2

Code Lord 的答案是正确的，但请始终尝试为每个浏览器转换您的字体：

英语：

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

中文：

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

您可以使用此工具转换字体：http://www.fontsquirrel.com/tools/webfont-generator

Answer 3

据我所知，台湾有一项服务可以帮助您使用不同的中文字体。

http://en.justfont.com/fonts

由于中文字体文件较大，建议使用Google云服务。但是上面没有合适的中文字体。所以你可以试试这个justfont网络字体服务。

Select 任何你想要的特定字体粗细的字体。然后它将添加到您的项目中。
选择您的选择器，例如 .notosans、#notosans 或 h2
单击 "JS" 按钮并获取您的设置代码
在<body>
插入您的 class 或 ID。

试试吧，使用class和id来获得你漂亮的中文字体。 :)

如何在一个页面中使用两种字体系列？

how to use two kinds of font-family in one page?

html

css

fonts

font-face