根据语言更改字体大小答案

【问题标题】：Change Font Size Based on Language根据语言更改字体大小
【发布时间】：2013-02-22 10:11:58
【问题描述】：

所以我已经阅读了一些关于 css 语言标签的建议，但似乎一切都需要提前将语言放入标签中。我无法更改韩语的 html 标签，它具有与英语相同的 h1 标签。这是因为它是同一网站的翻译版本。

我希望韩文版本的字体和字体大小与英文版本不同。我可以通过只知道语言来做到这一点吗？我发现了一些其他处理使用 @font-face { } 的 unicode 范围的问题，一方面，我无法弄清楚韩语的 unicode 范围是什么，我尝试查看所有文档，但我只是不理解如何计算 unicode 范围并写了。另外，我希望有一个选项，例如，

h1{
unicode-range: korean;
font-size: 10px;
}

h1{
unicode-range: english;
font-size 20px;
}

这可以吗？

谢谢！

【问题讨论】：

Assigining different font-size per each font in one font-family的可能重复
处理同一基本主题的各种问题，另见例如stackoverflow.com/questions/535616/…
我的问题是不同的，考虑到答案是找到一种适用于所有语言的字体......韩语和英语是非常不同的风格，设计明智需要特定的字体
第二个链接实际上是我在评论中看到并引用的，我想知道是否有一种方法可以基于标题标签而不是字体和使用字体系列
有一种方法可以做到这一点，正如我在回答中指出的那样。您的网站切换语言的方式会为html 标签分配一个属性。

标签： html css unicode

【解决方案1】：

在您的情况下，lang 属性是在 html 标记上设置的，因此您可以使用规则根据该属性设置您需要的所有元素的样式：

html:lang(en) h1{
    font-size: 20px;
}

html:lang(ko) h1{
    font-size: 10px;
}

但请注意，:lang 伪类仅在 IE8+ 中受支持。如果您需要 IE7+ 的支持，最好选择这种类型的语法：a[lang="en"]。

【讨论】：

所以你说因为语言是韩语所以 html 会自动被赋予一个 html:lang(ko) 标签？
这就是您的网站处理语言切换的方式。我尝试自己使用开发者工具来添加这些规则并且它们起作用了。你可以看到检查你的网站<html>标签（即你的代码的主要包装）被添加属性lang=en-US或lang=ko-KR。

【解决方案2】：

如果您在 HTML 中设置 lang 属性来更改样式，则可以使用 CSS :lang 伪类。例如see demo 或以下代码：

CSS

:lang(en) {
    font-size:20px;
}

:lang(fr) {
    font-size:10px;
}

HTML

<p lang="en">Lorem</p>
<p lang="fr">Lorem</p>

【讨论】：

网站是用英文写的，然后有一个完全一样的翻译版本，除了单词被翻译成韩文。如果我将原文包装在 lang 属性中，韩语翻译将具有相同的 lang 属性，所以我将无法引用它
问题指出无法修改 HTML 标记。
它使用来自 wordpress 的 wpml，如果它有助于理解我在说什么，www.sarahleejs.com 是实际的网站
是的，它有帮助，因为您可以看到 <html> 元素上的 lang 属性已更改。所以我们可以使用这种方法。

【解决方案3】：

这可能会有所帮助：http://billposer.org/Linguistics/Computation/UnicodeRanges.html

您正在寻找 Hangul，即“韩国字母表，也称为 Hangul，[nb 1] 或 Chosongul”

问候

【讨论】：

问题在于区分的方式。设置 unicode-range 将不允许您以不同的方式设置特定范围的样式。
您能否提供有效的 css 以使答案真正完整？

【解决方案4】：

如果您使用某种动态语言作为网站的服务器端，您可以简单地根据区域设置进行动态 CSS 加载。

例如您在 css 文件夹中有以下内容：

style.css        // this is the default
style_en_US.css
style_ko_KR.css

因此，您可以将全局设置与特定于语言环境的设置分开，并且可以轻松地动态加载所需的样式。

如果你有一个静态 HTML 页面，你可以让 JavaScript 动态加载 CSS，或者你可以使用

:lang

其他人指出的伪类。

无论您选择何种解决方案，请记住注意浏览器的兼容性。

注意：通常让用户明确选择他/她的首选区域设置而不是根据客户的系统信息自动设置一个更好的解决方案。

【讨论】：

【解决方案5】：

更改语言选择的样式表

<body onload="set_style_from_cookie()">

//style sheet
<link rel="stylesheet" type="text/css" title="korean"
    href="http://example.com/css/korean.css">
<link rel="alternate stylesheet" type="text/css" title="english"
    href="http://example.com/css/english.css">

//form to select language using button
<form>
<input type="submit"
  onclick="switch_style('korean');return false;"
  name="theme" value="korean Language" id="korean">
<input type="submit"
  onclick="switch_style('english');return false;"
  name="theme" value="english language" id="english">
</form>

//javascript
<script>
// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{

  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{

    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{

    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}
</script>

【讨论】：

【解决方案6】：

你可以使用类似的东西：

h1[lang=en] {
  font-size: 10px;
}

h1[lang=kr] {
  font-size: 14px;
}

或者如果您只想指定一次lang=""，而不是在每个元素上，您可以这样做

#content[lang=en] h1 {

}

#content[lang=en] p {

}

#content[lang=kr] h1 {

}

#content[lang=kr] p {

}

【讨论】：

这仅在 HTML 元素指定了 lang 属性时才有效。