先说结论
css设置 font-variant-ligatures: none;
表现
最近遇到一个客诉“输入框坏了”。具体表现为用户输入fish，i上面的点不见了。输入ffl，f和l相连了。见下图
我以为是用户的浏览器坏了，等我自己复现出来的时候：完了，我的也坏了😭。
定位问题
问题很好定位，其实就一行css代码。 family: PingFang SC; 可是总不能回复用户：【字体的问题。我也没办法。】
这我就傻眼了，这个怎么解决呢？问了chatgpt/google：输入框输入，fi，i上的点没了，请问是什么原因？也没有找到解决方法。和UI以及产品经理评估过之后无奈选择fix in future。
解决问题
就在今天，阅读张鑫旭老师《CSS新世界》第9章第5节时终于找到了答案。
字体特征和变体指OpenType字体中包含的不同字形或字符样式。 其中的OpenType字体是Adobe和微软联合开发的一种字体，字体文件的原始后缀可能是.otf、.otc、.ttf或.ttc。OpenType目前是国际标准组织（International Organization for Standardization，ISO）的公开标准，于2007年3月以ISO/IEC 14496-22发布。而“不同字形或字符样式”指的是连字（将fi或ffl等字符组合在一起的特殊字形）、字距（调整特定字母形式对之间的间距）、分数、数字样式和其他一些字符。
font-feature-settings 是一个 CSS 属性，用于控制文本中的 OpenType 字体特性。OpenType 字体是一种字体格式，具有许多高级排版功能，例如字体连字、替换、大小写和数字样式等。这个属性可以用来控制这些高级排版功能是否启用，以及如何启用。
font-feature-settings: "liga" 0;就关闭了连字。问题解决。
扩展
也可以用font-variant-ligatures来控制。 它是一个 CSS 属性，用于控制文本中的连字和连字符的显示方式。
可以在 developer.mozilla.org/zh-CN/docs/… 查看更多font的高级属性。
font-*有很多属性，比如数字0中间的横线
写在最后
就像中国书法里的连笔一样，设计师针对英语母语使用者，为了字体的美观和易于阅读而额外的设计，在国内的话，是否需要打开呢？
