Fira sans 看起来不一致 fi 和 fl 没有分开,看起来更大胆
Fira sans not looking consistent fi and fl are not separated and look bolder
目的是去掉文中的fl和fi的粗体字
chrome61
我能够在此代码笔中重现该问题:
https://codepen.io/jossnaz/pen/vWgEGB
基本上 fira sans 没有对字符应用任何 letter-spacing
,它们的字符是粗体。不知道为什么。
这是它在 firefox 56 上的样子:
有一个 CSS 属性旨在控制浏览器自动生成连字的方式。
尝试添加:
font-variant-ligatures: none;
到您的段落元素。
查看此代码笔:https://codepen.io/jossnaz/pen/vWgEGB
对于您想要控制字符间距的问题,并且您的源文本的组成类似于 "truffle shuffle",具有单独的 F 和 L 字符,这将阻止浏览器生成连字并像您一样应用间距大概期待吧。
但是,这不是您 运行 在您的站点中遇到的唯一问题!
在您的页面中,文本实际上使用了 Unicode fi 和 fl 连字(U+FB01 和 U+FB02) .浏览器不会将它们分离回单独的字符,它们 不 包含在 Google 字体 API 中。这可能是您的 CMS 中的某个插件自动转换连字,或者可能是从编辑器中复制和粘贴的结果。
有关此示例,请参阅:https://codepen.io/anon/pen/mqmLLZ。
这些连字字符未包含在网络字体中 - 拉丁连字位于 U+FB00-FB06,字体或 Google 的字体 API 不包含它们。
因此,他们正在切换到备用字体,在本例中指定为通用 sans-serif
- 可能是 Arial 或 Helvetica。
它们本身不是粗体,但比 Fira Sans 更重。
目的是去掉文中的fl和fi的粗体字
我能够在此代码笔中重现该问题:
https://codepen.io/jossnaz/pen/vWgEGB
基本上 fira sans 没有对字符应用任何 letter-spacing
,它们的字符是粗体。不知道为什么。
这是它在 firefox 56 上的样子:
有一个 CSS 属性旨在控制浏览器自动生成连字的方式。
尝试添加:
font-variant-ligatures: none;
到您的段落元素。
查看此代码笔:https://codepen.io/jossnaz/pen/vWgEGB
对于您想要控制字符间距的问题,并且您的源文本的组成类似于 "truffle shuffle",具有单独的 F 和 L 字符,这将阻止浏览器生成连字并像您一样应用间距大概期待吧。
但是,这不是您 运行 在您的站点中遇到的唯一问题!
在您的页面中,文本实际上使用了 Unicode fi 和 fl 连字(U+FB01 和 U+FB02) .浏览器不会将它们分离回单独的字符,它们 不 包含在 Google 字体 API 中。这可能是您的 CMS 中的某个插件自动转换连字,或者可能是从编辑器中复制和粘贴的结果。
有关此示例,请参阅:https://codepen.io/anon/pen/mqmLLZ。
这些连字字符未包含在网络字体中 - 拉丁连字位于 U+FB00-FB06,字体或 Google 的字体 API 不包含它们。
因此,他们正在切换到备用字体,在本例中指定为通用 sans-serif
- 可能是 Arial 或 Helvetica。
它们本身不是粗体,但比 Fira Sans 更重。