html - 一个类使用两个@font-face

Question

我使用 CSS3 自己的@font-face 作为一个类:

CSS:

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp.eot');
    src: url('font/Bebas/lp.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp.woff') format('woff'), url('font/Bebas/lp.ttf') format('truetype'), url('font/Bebas/lp.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp2.eot');
    src: url('font/Bebas/lp2.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp2.woff') format('woff'), url('font/Bebas/lp2.ttf') format('truetype'), url('font/Bebas/lp2.svg#svgFontName') format('svg');
}

.box h1 {
    font-family: LP;
    font-size: 20px;
}

HTML:

<div class="box"><h1>Some Text</h1></div>
<div class="box"><h1>تکست</h1></div>

此字体适用于英文文本，现在我希望当我在同一类上有阿拉伯文或波斯文文本(rtl 文本)时，它会适用于第二种字体。

这意味着:

如果是英文文本，css开始使用@font-face (lp.ttf) 如果是阿拉伯文或波斯文，css 开始使用@font-face (lp2.ttf)

但两者的字体名称相同。都是'LP' 你知道，解释起来很复杂，

想为 2 种不同语言的 h1 标签使用 2 @font-face。 是否可以通过 css 做到这一点？还是jquery？甚至 php？？

我不知道如何用 h1 标签做到这一点!它应该是 h1，而不是类或 id。

Answer 1

正式来说，您可以使用 unicode-range描述符。
对于您的示例，您只需在末尾添加一行:

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp.eot');
    src: url('font/Bebas/lp.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp.woff') format('woff'), url('font/Bebas/lp.ttf') format('truetype'), url('font/Bebas/lp.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp2.eot');
    src: url('font/Bebas/lp2.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp2.woff') format('woff'), url('font/Bebas/lp2.ttf') format('truetype'), url('font/Bebas/lp2.svg#svgFontName') format('svg');
    unicode-range: U+0600-07FF;
}

但是，我不知道浏览器对它的支持程度如何。彻底测试。