0

我将 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。

4

2 回答 2

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

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

于 2013-08-09T19:30:45.883 回答
0

你在错误的地方寻找解决方案。你的问题不是你的 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] { ... }
于 2013-08-10T00:07:13.587 回答