CSS可以选择不同的默认字体和大小取决于语言

问题描述：

INPUT{ font-family: Raavi; font-size: 14px;}

工作正常时，该文本框包含一些像这样的旁遮普脚本：ਪੰਜਾਬੀ

但用户可能会输入英文，而我宁愿使用不同大小的Verdana字体，因为Raavi字体中的英文字母是真正的时髦，而且大小是错误的。

所以我的问题可以表示为：

是否有根据输入
CSS中的任何类型的条件FONT-FAMILY和尺寸选择反正对CSS了解输入语言？

所以我可以创建以下PSEUDO_CSS：

INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}

或

INPUT.EN{ font-family: Verdana; font-size: 12px;} 
INPUT.PA{ font-family: Raavi; font-size: 14px;}

答

这在CSS3解决，这不会帮助与旧的浏览器的兼容性，但每个不同的字体混合希腊和拉丁文字时，它为我工作。下面是来自CSS字体模块工作草案采取了一个例子：

@font-face { 
    font-family: BBCBengali; 
    src: url(fonts/BBCBengali.ttf) format("opentype"); 
    unicode-range: U+00-FF, U+980-9FF; 
}

的unicode-range位是法宝：它告诉浏览器使用这个字体面语句只Unicode字符则该特定块。如果浏览器在该范围内找到字符，则使用该字体;对于该范围以外的字符，它会按照通常的默认模式回退到下一个最具体的CSS语句。

答

纯CSS解决方案可能是那么容易，因为：

input[lang=en] { 
    font-family:Verdana; 
    font-size:12px; 
} 

input[lang=pa] { 
    font-family:Raavi; 
    font-size:14px; 
}

但它仍上涨给你设置输入元素的lang属性。

不幸的是，与大多数一样， CSS功能attribute selectors目前在所有浏览器中都不能100％正常工作。我认为最好的选择是使用每种语言的类并将其分配给输入元素。

更新：

按照您的要求，这里有一个简单的方式与香草JavaScript来做到这一点的例子。当然有待改进，但这个“有效”。

<style type="text/css"> 
    .lang-en { 
    font-family:Verdana; 
    font-size:12px; 
    } 

    .lang-pa { 
    font-family:Raavi; 
    font-size:14px; 
    } 
</style> 

<form> 
    <input type="text" onkeyup="assignLanguage(this);" /> 
</form> 

<script type="text/javascript"> 
    function assignLanguage(inputElement) { 
    var firstGlyph = inputElement.value.charCodeAt(0); 

    if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) { 
     inputElement.setAttribute('lang', 'en'); 
     inputElement.setAttribute('xml:lang', 'en'); 
     inputElement.setAttribute('class', 'lang-en'); 
    } else { 
     inputElement.setAttribute('lang', 'pa'); 
     inputElement.setAttribute('xml:lang', 'pa'); 
     inputElement.setAttribute('class', 'lang-pa'); 
    } 
    } 
</script>

这个例子激发之后的字符已经被输入。然后它检查它是否落在被认为是“英语”的范围内并相应地分配属性。它设置lang，xml:lang和class属性。

我的问题是，我不能提前预知什么语言将进入一个单独的输入元素 – Noah 2009-02-11 06:23:04

在这种情况下，我推荐一个JavaScript的解决方案。您可以检查字符范围的输入，然后将相应的语言类添加到元素。缺点是字体更改可能很明显。事实上，这听起来像是一个棘手的情况。 – 2009-02-11 06:27:17

你可以修改你的答案来包含一个JS片段，它会这样做。假设如果第一个字符 Noah 2009-02-11 14:33:52

答

CSS怎么知道输入语言？

恐怕唯一的解决办法是找到一个unicode字体，这两个字符集看起来很漂亮。如果您的远程阅读器尚未安装它，这远非完美。也许Arial Unicode MS。

答

input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}

这应该为你的目的工作：

如果文字是英文，两种字体应包含字形和Verdana将是首选
如果文字是旁遮普语，宋体不应包含字形，所以浏览器应该回落到Raavi

我不是正面的，如果所有的浏览器将正确的行为但是，这是他们应该根据CSS规范做的。

答

唯一可靠的解决方案，现在是列出的字体在希望的顺序，如万里表示。

希望通过扎克指示的（正确）的解决方案可能会适当地多浏览器支持。

但即使如此，这将是你的责任来标记正确的lang属性的各个部分。

什么都不能可靠地检测到任何文本的语言。

答

它是维持多语种网站使用单独的CSS文件为每种语言时，常见的做法。这是可取的，因为你将需要调整超过字体。您经常需要调整间距以匹配语言中字符串的长度。此外，您可能需要调整页面的一些基本格式，以使语言用户更自然。

坚固的答案是国际化，而不是仅仅满足于一个不同的字体，因为最终你会发现，字体的选择将是不够的。

答

在你的HTML标记你有郎财产。（只是LANG = 'EN'或LANG = 'EN-EN'）

我们可以在CSS中使用。

如果我们想给为不同的语言p标记特定CSS，

p:lang(en-EN){ 
}

各自的风格，我们需要添加。

这是我们可以为不同语言提供特定css的方式。

例如

html{font-family: Raavi; font-size: 14px;} 
html:lang(en-EN){font-family: Verdana; font-size: 12px;}

CSS可以选择不同的默认字体和大小取决于语言

相关推荐