如何解决土耳其网站中的连字问题？答案

【问题标题】：How to fix ligature problem in turkey website?如何解决土耳其网站中的连字问题？
【发布时间】：2019-06-13 11:33:42
【问题描述】：

我的土耳其版网站有问题。连字有问题。确切地说，我有一些英文单词，例如“SHIPPING”，如果我添加样式 CSS text-transform: uppercase;对这个单词上面的每个字母“I”都做了一个不必要的点。（有些东西与土耳其语混合）。我使用“Roboto”字体。

我尝试使用样式 font-variant-ligatures: none;不幸的是，它不起作用。我注意到如果我从更改为一切都可以，但这是理想的解决方案。有人有其他解决方案吗？

【问题讨论】：

【解决方案1】：

这是语言问题：如果您的语言是土耳其语，那么您有两个不同的 i 字符（i 和 ı），它们也有不同的大写版本（İ 和 I）。如果您的网站是土耳其语，那么带点的 I 将用作大写字母。您必须使用 lang 属性手动将元素的语言设置为英语。 Yu 不能假设您的浏览器熟记文本的语言。

div {
  font-size: 40px;
  font-family: sans-serif;
  text-transform: uppercase;
}

<html lang="tr">
<div>TR: shipping</div>
<div lang="en">EN: shipping</div>
</html>

顺便说一句：它与连字无关。

【讨论】：

【解决方案2】：

font-language-overrideisn't very widely implemented yet，但这是一个纯 CSS 的解决方案，可能有一天会奏效。 Firefox 声称支持它，但我无法让它与添加了font-language-override: ENG; 的示例 yunzen 一起使用。 There's more information on the feature here.

【讨论】：