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

Question

我有以下CSS片段:

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

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

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

所以我的问题可以说是:

• 根据输入,CSS中是否存在任何类型的条件字体系列和大小选择
• 有没有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功能一样,属性选择器并非100%在今天的浏览器阵列中工作.在我看来,你最好的选择是使用每种语言的类并将其分配给input元素.

更新:

根据您的要求,这是一个使用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

在您的 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;}