关于html：如何在一页中使用两种字体家族？


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

我的网页有两种语言，英语和中文，我只能对一种语言应用一种字体，我怎么能同时对英语和汉语应用两种字体？想法？

1
2
3
4
5
6
7
@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');
}

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

相关讨论

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

http://en.justfont.com/fonts

由于中文字体文件太大，建议使用Google云服务。但是上面没有合适的中文字体。因此，您可以尝试使用此justfont网络字体服务。

  • 选择所需的任何字体以实现特定的字体粗细。然后将其添加到您的项目中。
  • 选择您的选择器，例如.notosans，#notosans或h2
  • 点击" JS"按钮并获取您的设置代码
  • 在<body>之前添加
  • 插入您的课程或ID。

    • 尝试使用类和id获得漂亮的中文字体。 ：)

    相关讨论

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

    英语：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @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;
    }

    中文：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @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

    相关讨论

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

    英语：

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

    中文：

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

    其他：

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