logo标签列表

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

htmlcssinternationalization
5
有没有一种方法可以在HTML页面上为不同的语言自动使用不同的字体来美化文本呢？我的网站使用英文和阿拉伯语。我想根据显示的语言使用不同的字体。
假设我有一个像这样的段落：
هذه الجملة مكتوبة في اللغة العربية ولكن الجملة التالية مكتوبة في الإنجليزية. The previous sentence is in Arabic but this one is in English.
我希望用X字体显示阿拉伯语句子，但用Y字体显示英语句子。有没有一种方法可以在不基于服务器端对其语言进行了解的情况下手动为每组文本赋予不同的CSS样式，即将每个句子包裹在不同的CSS类中？
谢谢。
您应该在使用不同语言的地方添加lang属性：<body lang="en">blah<p lang="ar">هذه الجملة مكتوبة في اللغة العربية ولكن الجملة التالية مكتوبة في الإنجليزية</p><p>The previous sentence is in Arabic but this one is in English.</p></body>。然后，您可以使用属性font-family和基于lang属性的选择器来创建不同的字体堆栈。编辑：这是WCAG 2.0技术指南[H58]的技巧。 - FelipeAls
5个回答
3

Jukka是正确的，你不能自动区分语言。你可能需要在适当的地方设置lang属性。你有以下选项：

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

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

body {
  font-family:Palatino,serif;
}

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

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

至于最后一个选项：

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

外部链接

2
不区分标记语言时，不可能为不同的语言设置不同的字体。通常会使用带有class属性或lang属性或两者都具备的标签。lang属性是逻辑上的选择，而在使用class时，样式表更加可靠（因为所有支持CSS的浏览器都支持class选择器）。
请注意，您可能需要这种标记来实现其他目的。对于主要为英语页面的阿拉伯文本，通常最好同时使用bdi标记和lang = ar和dir = rtl属性以及CSS中的bdi {unicode-bidi：embed}来处理方向性问题。 （在您的消息中，由于方向性问题，阿拉伯文本将句点错放在了开始位置，即右侧。）
虽然可以使用客户端代码运行一些语言猜测程序并相应地修改DOM，但这种方法不太可靠且有些复杂。
通常，文档中的所有副本文本都应该使用相同的字体。这可能很难处理（没有真正全面的字体可以成功用于网页），并且某些语言在实践中可能需要特殊字体。但是，有几种合理的字体可以涵盖英语和阿拉伯语，例如。
0
假设其中一种语言不包含另一种语言的字形，您应该能够使用字体回退。非英语字体有时包括英语字形，因此将英语设置为主要语言，而将阿拉伯语作为回退语言。当文本呈现时，它将使用英语字体，并在遇到不存在于英语字体中的字形时（即任何阿拉伯字母），它将改用阿拉伯字体。类似这样：
@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';
}

希望这可以帮到你。
0
以下函数将使用span标签包装不同语言的内容 创建.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);
}
0

如果您使用的是UTF-8编码，则内容应该以正确的字符编码显示，但仍将使用相同的字体。

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接