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

我使用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;
}

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

HTML:

@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;
}

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

一些文本
تکست

这种字体适用于英文文本，现在我想当我有一个阿拉伯语或波斯语文本（rtl文本）在同一类，它将与第二个字体的工作面

这意味着：

@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;
}

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

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

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

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

---

我不知道用h1标签怎么做！它应该是h1，而不是类或id。

正式地说，您可以使用描述符。
在您的示例中，您只需在末尾添加一行：

@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;
}

---

然而，我不知道浏览器对它的支持有多好。彻底测试。

您在错误的地方寻找解决方案。问题不在于CSS，而在于HTML

HTML包括

lang

和

dir

属性，用于指示内容所使用的语言及其书写方向。可以使用属性选择器选择元素。例如：

<h1 lang="en" dir="ltr">Some Text</h1>
<h1 lang="ar" dir="rtl">تکست</h1>

h1[lang=en] { ... }
h1[lang=ar] { ... }

h1[dir=ltr] { ... }
h1[dir=rtl] { ... }

一些文本
تکست
h1[lang=en]{…}
h1[lang=ar]{…}
h1[dir=ltr]{…}
h1[dir=rtl]{…}

一种可能的解决方案是让服务器根据用户的语言偏好提供不同的文件。它很好，无缝，虽然有点工作量。就目前的情况而言，如果字体面具有相同的名称，则无法执行您想要的操作，尽管您可以包括一个覆盖英文字体面的阿拉伯文样式表，将它们组合成一种字体。为什么您不能更改

字体面

名称并使用

LP1

和

LP2

？将其他类添加到您的div

中，
中.lp1{font-family:lp1；}
并根据用户选择或其他什么更改该类。对于h1这样的特定标记，我可以使用两种不同的字体类型吗？当然我不能@Morpheus，LP是英文字体，LP2是阿拉伯文字体。怎么做@SLaksIt可以工作，但只在IE上（我有IE 10），在Chrome和FireFox上测试过，但不起作用，但这是最好的答案，我会找到一种与Chrome和FireFox兼容的方法。谢谢