logo标签列表

如何在两种不同的语言（如英语和波斯语）中使用两种字体？

htmlcssfont-facelang
6
想象一下，你想设计一个网站，帮助伊朗人（波斯语（波斯语））学习英语。英语和波斯语（波斯语）的字母没有任何相似之处，因为波斯语是从右到左书写的，而英语是从左到右书写的，并且完全不同。我没有找到任何标签来设置所有波斯语（波斯语）单词的字体和其他字体的所有英语单词。例如，自动设置B-Nazanin为波斯语，设置Times New Roman为英语，不需要每次为每个单词定义字体，只需一次定义这些字体。我们能做什么？ 谢谢。
1
请参阅http://www.w3.org/International/questions/qa-css-lang。 - danielnixon
1
你为什么觉得需要设置不同的字体，以及为什么认为jQuery是这里最重要的东西（问题的第一个标签）？ - Jukka K. Korpela
6个回答
10

一个可能的选择是在网站以波斯语显示时，给<html>或文档中的任何其他元素赋予lang="fa-IR"属性/值。

因此，您可以使用[lang|="fa"]选择器覆盖CSS声明。

例如：

[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
  <p> سلام دنیا </p> 
</html>

或:

p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>

没错。对不起 :) 我觉得我的问题无法回答 :) 我想我应该忘掉它 :) - Mostafa Eslami
1
@MostafaEslami 我不建议这种方式，但是假设你正在使用JavaScript，可以通过正则表达式匹配波斯语内容，以便将它们包装在一个特定类名或其他适当的包装元素中，从而对它们应用所需的样式。 - Hashem Qolami
6
你可以使用以下链接实现此目的： 在网页上用不同字体展示两种语言的文本，使用CSS中的font-face规则 
@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';}

提示：针对不同的语言，您可以使用不同的“unicode-range”。

2
在HTML中使用语言来设置样式的方法是在CSS样式表中使用:lang选择器。例如：
:lang(ta)   {
    font-family: Latha, "Tamil MN", serif;
    font-size: 120%;
    }

同时不要忘记在 HTML 代码中使用 lang 属性。

<p lang="en">Ceci est un paragraphe.</p>
这是最好的答案。OP应该已经在html元素上*使用lang*。请参见http://www.w3.org/TR/WCAG20-TECHS/H57.html。 - danielnixon
没错。但是我应该怎么为两种不同语言定义两种字体呢？ - Mostafa Eslami
当内容混合英语和波斯语时，为什么他要包含泰米尔语的代码？而且，在标记中没有使用相应的属性时，使用语言选择器是毫无意义的。 - Jukka K. Korpela
替换OP想要的字体很简单。由于屏幕阅读器等原因，文档语言的更改已经需要使用“lang”进行标记，因此从CSS中目标选择“lang”是合适的。 - danielnixon
泰米尔语不太方便。我只需要两种不同语言的字体... - Mostafa Eslami
2
如果您真的想为两种不同的语言使用两种不同的字体，那么您有以下选择：
1）使用一些能够区分这两种语言的标记。这可以是class属性或者（更符合逻辑但浏览器支持稍微有限）lang属性。当然，您会将其用于较少频率的语言。这需要很多工作，具体取决于内容生成系统，可能可以自动完成。
2）选择字体，使得主要字体不包含其他语言的字符。例如，如果您设置`* { font-family: foo, bar }`并且foo包含了拉丁字母但没有阿拉伯字符，那么foo将用于英语，bar将用于波斯语。标点符号仍然是一个问题。更重要的是，很难找到这样的字体。
3）使用CSS代码通过Unicode范围来选择字体系列。我不会详细解释，因为这种方法浏览器支持有限，实际上并不实用。
然而，您似乎在创造问题而不是解决问题。根据印刷学原理，如果可能的话，应该使用相同的字体来排版文本。您应该选择一个适合英语和波斯语的字体，或者最好是一系列这样的字体（因为没有一种字体能够在所有电脑上使用），或者一种可下载的字体。如果无法实现这一点，您可以仔细地选择两个字体或两个字体列表，以便将它们全部列出并且浏览器将以自然的方式使用它们：对于每个字符，使用包含该字符的列表中的第一个字体。
谢谢分享，我之前不知道unicode-range，看起来非常有用。只是惊讶于IE9也支持它。 - Hashem Qolami
问题是我没有找到适合每种语言设计的合适字体。无论如何，感谢您的指导... - Mostafa Eslami
出于好奇，哪些用户代理支持class而不支持lang？ - danielnixon
@danielnixon，浏览器无需做任何支持lang HTML属性的事情，因为它被定义为声明性的，而不是具有任何特定效果。但是当它用于描述目的时，CSS对[lang = ...]或: lang（...）选择器的支持变得至关重要。前者得到了很好的支持（除非您需要关心IE 6），但是后者更方便的选择器需要IE 8或更高版本和“标准模式”。 - Jukka K. Korpela
0

对于波斯语内容，请使用B-Nazanin或其他字体，对于英语内容，请使用Open sans。

如果您想将波斯语设置为B-nazanin，并将英语设置为open sans，请在CSS中尝试以下代码：

body{
  font-family: "Open sans","B-nazanin";
}
1
我想在所有英文单词中使用Times New Roman字体，并在所有波斯语单词中使用B-Nazanin字体。你说的是备用字体，当浏览器没有第一个字体时，使用第二个字体... - Mostafa Eslami
0
如果我理解你的问题正确，那么你想在一个网站上混合使用波斯语和英语。
为两个类分配，可能是“farsi”和“english”，并使用适当的字体系列声明。然后将波斯文本放在<div class="farsi">中，将英文放在<div class="english">中。
编辑以处理语言混合：您将
放置在主要语言周围，并使用<span>标记其他语言中的单词。
我认为没有一种简单的方法可以精细地混合使用具有不同字母表甚至写作方向的语言。也许你可以在HTML组成工具中使用宏或其他东西来添加必要的标记。
准确地说，问题是我有很多混合的代码。例如：波斯语 波斯语 波斯语 波斯语 英语 波斯语 波斯语 英语 波斯语 波斯语 英语 波斯语 波斯语 英语 波斯语 ...我需要多次重复这项工作，我会累死的 :) - Mostafa Eslami
<div class="farsi"> 波斯语 波斯语 波斯语 波斯语 <span class="english">英语</span> 波斯语 波斯语 <span class="english">英语</span></div> 我希望有一种自动化的方法来生成这些<span>标签。 - Bob Brown
我本来不想做重复的工作，但你强调要做 :) 我学到了不应该做重复的工作，因为我问了这个问题... - Mostafa Eslami
请在需要使用英语的段落上使用 <p lang="en">，并在文档中使用 <html lang="fa">。 - danielnixon
不是我想让你做重复性的工作，而是我看不到其他解决办法。 - Bob Brown
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接