前端开发小常识之:
垂直居中很难,你没有办法简单的用一个 CSS 内置属性让图标和字体垂直对齐,没办法让文字在按钮中间对齐。垂直对齐是 Web 设计最难的十大问题之一,你必须得把字体参数提取出来,然后过一遍公式,算出来偏移量,然后给你的元素垫 Padding。但问题来了,不是所有情况下你都能 Measure 出来用户在用什么字体,比如,在你没有 Ship 一个 Web Font 的情况下,你怎么知道自己的用户到底在用什么字体。
如果你要 Ship 一个 CJK Web Font,恭喜你跳进了另外一个兔子洞。
为了解决这个问题,我们直接暴力搜集了所有主流操作系统在历史上所有的默认字体,从 Windows 98 到 Linux 主流发行版,从 Android 4 到最新版 iOS,以及大多数主流国产手机厂商自己的字体。我们对所有字体都测量了一遍,提取参数,并且通过自定义 CSS 的方式把这些字体的参数全都对齐了一遍,写了一个
对齐工具。
你不需要修改自己的设计来配合这个工具,只需要在字体列表里面选择你的参考字体,它就会把所有其他系统下面的字体参数匹配到你的参考字体上,点击左下角的下载按钮就能拿到矫正字体,包括各平台字重也考虑了进去。
如果你在用自己的 Web Font,这个工具也能对你有帮助。因为 Web Font 在没加载出来到加载出来这段时间,字体会调一下,布局会瞬间变形。这个工具能帮你把系统字体对齐到你的 Web Font 上,让画面变化最小。
目前这个工具非常实验性,只支持非衬线体,感兴趣的朋友可以试试,觉得哪里不对头也欢迎给我反馈。