主要观点:此站点现在在 iOS 和 iPadOS 上支持动态类型,通过在 iPhone 或 iPad 的系统设置中更改“显示与亮度>文本大小”可在网站上看到变化,这对可访问性和一致性都有好处,仅需几行 CSS 即可实现此改进,如设置html
的font-size
和font
属性等,还为桌面浏览器添加了@media
规则,可根据不同宽度调整字体大小,可使用其他预定义字体值并覆盖字体族,若在 Apple 平台使用 WKWebView 或 SFSafariViewController 也有相同能力,建议查看博客等样式表并思考此可访问性方法如何改进。
关键信息:
- 支持动态类型的设置方式及效果。
- CSS 代码中关于字体设置的属性及作用。
- 为桌面浏览器添加的媒体查询规则。
- 在不同环境下的相同能力。
重要细节: font-size
属性设置页面默认文本大小,浏览器和用户都能识别。font
属性的-apple-system-body
值是获得动态类型支持的关键,会覆盖font-size
设置。font-family
可用于覆盖系统字体。- 为桌面浏览器添加的
@media
规则在窗口宽度大于 800 像素时调整字体大小。 - 使用
em
和rem
尺寸可使元素在其他上下文中正确缩放。 - 在 Apple 平台使用特定视图也有动态文本能力。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。