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文本）时，它将与第二个font-face一起使用。

表示：

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

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

想要使用2 @ font-face for h1 tag for 2 different language。可以通过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;
}

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

Answer 2

您正在寻找错误的解决方案。这不是你的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] { ... }

使用两个@ font-face作为一个类

2 个答案: