在 css 规则中以不同字体在网页中显示两种语言的文本

Question

我的网页按预期使用 Yekan 字体显示波斯语文本。为什么英文文本错误地使用了 Alger 以外的字体？

@font-face { <!-- Persian Font -->
        font-family: Yekan;
        src: url(Fonts/BYekan.ttf);
        unicode-range:U+0600-06FF;
    }
    @font-face { <!-- English Font -->
        font-family: Alger;
        src: url(Fonts/ALGER.TTF);
        unicode-range: U+0020-007F;
    }

Answer 1

您只能向一个元素添加一种字体。
技巧：尝试给他们相同的名称：

@font-face { /* Persian Font */
    font-family: 'MyFont';
    src: url(Fonts/BYekan.ttf);
    unicode-range: U+0600-06FF;
}

@font-face { /* English font */
    font-family: 'MyFont';
    src: url(Fonts/ALGER.TTF);
    unicode-range: U+0020-007F;
}

用法：

body {
    font-family: 'MyFont';
}

这应该可以解决您的问题，但我无法测试它，因为我在移动设备上。

在 css 规则中以不同字体在网页中显示两种语言的文本

Display text with two language in webpage with different fonts with font-face at rule in css

html

css

font-face

unicode-range