目录
某些与字体相关的CSS属性将使您的网站完全无法访问，如果它们的值使用像素声明一次。
哪些属性会受到影响？
所有这些属性都不能以像素形式声明。
- font-size
- line-height
- letter-spacing
即使您的样式指南或设计文件以像素（或磅）为单位为您提供这些大小，我们也必须将这些值转换为更合适的单位。
为什么这很重要？
更改基本文本大小的人比您想象的要多得多，通常会使其变大。这可以在操作系统级别或浏览器级别完成。
随着浏览器和设备使设置可搜索且更加用户友好，调整字体设置的人数只会增加。（有一次，我走进我妈妈的房间，她拿着放大镜对着她的电脑屏幕，因为她不知道她可以改变文字大小！ 🤭 值得庆幸的是，那些日子已经过去了很久......
如果您使用像素来定义上述任何样式属性，则这些属性将不考虑用户的字体大小首选项！
充其量，这意味着文本内容变得太小，以至于某些人无法舒适地阅读（拿出放大镜！在最坏的情况下，这意味着字母或线条会相互重叠，使文本完全不可读！😱
标题：字体大小（rem），行高（px）
好消息是，如果我们确实使用适当的单位，那么无论他们在设置中进行什么更改，所有用户都可以完美地扩展。这些都是很容易做出的改变！
查看实际操作中的文本大小变化！
有必要熟悉一下如何在浏览器中更改字体设置，以便您可以更彻底地测试您的解决方案。
Firefox字体设置
标题：Firefox字体大小设置
标题：Firefox高级字体设置
Chrome字体设置
标题：Chrome字体大小设置
标题：Chrome高级字体设置
肯定会有类似的设置来更改操作系统和移动设备上的文本大小。但我会让你自己弄清楚这些设置。去探索吧！
我应该使用什么单位？
字体大小
一般来说，使用rem！
如果您的设计文件样式指南（例如Figma/SketchPhotoshop）提供以像素为单位的字体大小，则需要将其转换为rem。
有很多方法可以使这更容易，我已经在另一篇文章中概述了这些方法：我应该将默认的HTML字体大小更改为62.5%吗？从本质上讲，您需要将所需的任何像素值除以16才能获得在CSS中使用的rem等效值。
我从不建议在em中设置字体大小，除非您有一些特定的用例，您需要元素的字体大小来缩放其父元素。我能想到的唯一情况是将图标字体用于符号时。
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
