禁用字体连字CSS（字母组合）

Question

现代浏览器会自动将一些字母（最常见的是 'f' 和 'i'）组合成一个单一字符，称为连字。这通常优化了可读性（即更易阅读），但有时设计师可能不希望如此。

就我个人而言，我在 Chrome 53.0.2785.101 版本中遇到过这个问题，尽管我不能确定，但我相信这个问题在所有其他版本的 Chrome 中仍然存在。

Chrome f和i多次被组合

Edge IE11 在这种情况下，我正在寻找一种关闭它的方法。

- AwesomeGuy

---

如果有人想知道为什么有人想要关闭它，只需尝试一下使用一点字母间距(letter-spacing)即可。https://jsfiddle.net/MrLister/8h55dzc5/ - Mr Lister

Answer 1

事实证明，这是完全可能的，只需要花一些时间深入挖掘。正如在MDN中提到的，您可以关闭常见的连字。

font-feature-settings: "liga" 0;

不过，这可以通过使用一个不常用的 CSS 属性来完成。相反，您应该像这样使用font-variant-ligatures：

font-variant-ligatures: none;

这两个属性的作用完全相同，但后者是推荐使用的。

MDN：

注意：只要可能，Web作者应该使用字体变体的缩写属性或相关的长手写属性，如font-variant-ligatures、font-variant-caps、font-variant-east-asian、font-variant-alternates、font-variant-numeric或font-variant-position。

这个属性是一个低级特性，设计用来处理没有其他方式启用或访问OpenType字体特征的特殊情况。

特别地，此CSS属性不应用于启用小型大写字母。

- AwesomeGuy

Answer 2

我遇到了类似的问题，通过谷歌搜索来到这里。 我不希望在任何网页上使用连字号。 （当我将网页打印为PDF并在我的PDF阅读器上使用文本转语音引擎时，它会跳过发音连字号。） 以下是一个适用于我的解决方案：

在Chrome/linux上打开网页（也可能适用于其他桌面操作系统）。 安装Google Chrome的StyleBot扩展程序。然后，在其选项中，单击“样式”，然后单击“编辑全局样式表”。输入以下内容（基于@AwesomeGuy的答案）。

body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}

点击“启用全局样式表”即可。咦，Chrome再也不会渲染连字体（它会将字符分开显示）。 另外，当我要求Chrome将网页打印成PDF时，字符也会被分开显示。

- Abhishek Anand

---

非常有用。谢谢！ - Ryan Shillington

Answer 3

将此添加为书签，打印时仅需单击一次。

javascript: void(function () {
    var css = `
    * {
        font-variant-ligatures: none!important;
        font-feature-settings: "liga" 0!important;
    }
    `;
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        /*This is required for IE8 and below.*/
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
    /*It is not necessary to set a delay.*/
    setTimeout(function () {
        window.print();
    }, 2000);
})()

将JavaScript小应用程序添加到Chrome的书签

https://clicknathan.com/2010/07/12/how-to-add-javascript-applets-to-as-google-chrome-bookmarks/

Open a New Tab in Chrome. Command+T on a Mac, Ctrl+T on a Windows.
Google Toolbar as seen in Chrome's New TabRight click on the Bookmarks Toolbar. It’s a gray colored box like the one pictured here.
Select “Add Page” from the contextual menu that appears.
Give the Bookmark a name. You could Google “Baby Names” if you can’t come up with one. I like Shepherd or Samson or even Samsonite if you have aspirations of a career in luggage design, sales or airport security.
Paste the Javascript applet into the URL field.
Save that son of a gun and you’re on your way to finishing this tutorial!

- lovestackh343