Question

有没有办法在HTML页面上设置文本样式，以便它自动为不同的语言使用不同的字体？我的网站使用英语和阿拉伯语。我想根据所显示的语言使用不同的字体。

假设我有一个这样的段落：

هذهالجملةمكتوبةفياللغةالعربيةولكنالجملةالتاليةمكتوبةفيالإنجليزية。上一句是阿拉伯语，但这一句是英文的。

我希望阿拉伯语句子用X字体渲染，但英文句子用Y字体渲染。

有没有办法在没有手动为每组文本提供基于服务器端语言知识的不同CSS样式的情况下执行此操作，即将每个句子包装在不同的CSS类中？

谢谢

Answer 1

如果不在标记级别按语言区分文本，则无法为不同的语言设置不同的字体。您通常会使用带有<span>属性或class属性或两者的lang代码。 lang属性是逻辑选择，而样式在使用class时更加可靠（因为所有支持CSS的浏览器都支持class选择器）。

请注意，您可能还需要此类标记用于其他目的。对于主要英文页面上的阿拉伯语文本，通常最好使用bdi标记以及lang=ar和dir=rtl属性以及CSS中的bdi { unicode-bidi: embed }来处理方向性。（在您的留言中，由于方向性问题，阿拉伯文本在开始时，即在右侧，错位了一段时间。）

可以使用运行某些语言猜测程序的客户端代码并相应地修改DOM，但这是不可靠的，有些复杂。

通常，文档中的所有复制文本都应使用相同的字体。这可能很难处理（没有可以在网页上成功使用的真正无所不包的字体），并且某些语言在实践中可能需要特殊字体。但是，例如，有几种合理的字体涵盖英语和阿拉伯语。

Answer 2

Jukka是对的，你无法自动区分语言。您可能需要在适当的位置设置lang属性。您有以下选择：

使用CSS2：lang伪选择器;
使用CSS3：ltr或：rtl伪选择器根据文本方向性设置字体（实际上不一定是最好的主意）;
使用CSS3：脚本伪选择器。从我看到的，你可能正在寻找这个，实际上。

第一个解决方案的代码段如下：

body {
  font-family:Palatino,serif;
}

:lang(ar) {
  font-family: "Traditional Arabic",serif;
}

对于第二种选择，我已经说过这不是一个好主意。这不是，因为许多语言是从左到右或从右到左书写的。你肯定不想使用“传统阿拉伯语”字体作为希伯来语文本。我提到了这个选项，因为它可以帮助你解决其他问题。

对于最后一个：

:script(Arab) {
  font-family: "Traditional Arabic",serif;
}

外部链接

W3C i18n article on lang selector

Gunnar Bittersmann presentation

Multilingual Web Workshop in Limerick - 这就是这些代码片段的来源（我可以自己轻松创建它们但决定咨询专家）。

Answer 3

如果您使用的是UTF-8编码，内容应采用正确的字符编码，但仍使用相同的字体。

您需要为包含阿拉伯语的元素分配CSS类。 CSS无法自行检测到这一点。

您可以使用JavaScript在加载时执行此任务，检查元素并确定使用的字符范围。

Answer 4

假设其中一种语言不包含另一种语言的字形，您应该能够使用字体系列回退。非英语字体有时包括英语字形，因此将英语设置为主要语言，将阿拉伯语设置为后备字体。当文本呈现时，它将使用英文字体，当遇到英文字体（即任何阿拉伯字母）中不存在的字形时，它将使用阿拉伯字体。

这样的事情：

@font-face {
  font-family: 'your_arabic_font';
  src: url('../fonts/arabic_font.ttf');
}

@font-face {
  font-family: 'your_english_font';
  src: url('../fonts/english_font.ttf') format("opentype");
}

p {
  font-family: 'your_english_font', fallback, 'your_arabic_font';
}

希望有所帮助。

Answer 5

下面的函数将在一个范围内包装不同的语言使用相应的字体创建.en和.ar css类

function formatString(string) {
    var output = "<span class='en'>";
    var ar_start = parseInt("0x00600", 16);
    var ar_end = parseInt("0x006FF", 16);
    var currentLang = "en";
    for (var i=0; i<string.length; i++){
        if (string.charAt(i) != " "){
            var code = string.charCodeAt(i);
            if (code > ar_start && code < ar_end){
                if (currentLang != "ar"){
                    currentLang = "ar";
                    output += "</span><span class='ar'>"
                }
                }else{
                    if (currentLang != "en"){
                        currentLang = "en";
                        output += "</span><span class='en'>"
                    }
                }
            }
            output += string.charAt(i);
        }
    }

    return (output);
}

样式化文本以使用不同语言的不同字体？

5 个答案:

外部链接