Question

我有以下CSS片段：

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

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

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

所以我的问题可以说是：

基于输入
无论如何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;}

Answer 1

这在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字符块使用此font-face语句。如果浏览器找到该范围内的字符，它将使用此字体;对于该范围之外的字符，它会回落到通常的默认模式之后的下一个最具体的CSS语句。

Answer 2

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

此应适用于您的目的：

如果文字是英文，则两种字体都应包含字形，而首选的是Verdana
如果文字是旁遮普语，Verdana不应该包含字形，那么浏览器应该回到Raavi

如果所有浏览器都能正常运行，我不肯定，但根据CSS规范，这应该是他们应该做的。

Answer 3

纯CSS解决方案可能很简单：

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

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

但是仍然需要设置输入元素的lang属性。

不幸的是，与大多数花哨的 CSS功能一样，attribute selectors目前在浏览器阵列中并非100％正常运行。在我看来，你最好的选择是使用每种语言的类并将其分配给输入元素。

更新

根据您的要求，这里有一个使用vanilla 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属性。

Answer 4

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

强有力的答案是国际化，而不仅仅是解决不同的字体，因为最终你会发现字体选择不足。

Answer 5

在你的html标签中你有lang属性。（只需 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;}

Answer 6

CSS如何知道输入语言？

我担心唯一的解决方案是找到一个看起来很适合两个字符集的unicode字体。如果您的远程读卡器尚未安装它，那远非完美。也许是Arial Unicode MS。

Answer 7

目前唯一可靠的解决方案是按照所需的顺序列出字体，如里程所示。

希望更多浏览器可以正确支持Zack指示的（正确）解决方案。

但即便如此，您仍有责任使用正确的lang属性标记各个部分。

没有什么能够可靠地检测到任何文本的语言。

CSS可以根据语言选择不同的默认字体和大小

7 个答案: