Web 上的动态类型 • furbo.org

主要观点:此站点现在在 iOS 和 iPadOS 上支持动态类型,通过在 iPhone 或 iPad 的系统设置中更改“显示与亮度>文本大小”可在网站上看到变化,这对可访问性和一致性都有好处,仅需几行 CSS 即可实现此改进,如设置htmlfont-sizefont属性等,还为桌面浏览器添加了@media规则,可根据不同宽度调整字体大小,可使用其他预定义字体值并覆盖字体族,若在 Apple 平台使用 WKWebView 或 SFSafariViewController 也有相同能力,建议查看博客等样式表并思考此可访问性方法如何改进。
关键信息:

  • 支持动态类型的设置方式及效果。
  • CSS 代码中关于字体设置的属性及作用。
  • 为桌面浏览器添加的媒体查询规则。
  • 在不同环境下的相同能力。
    重要细节:
  • font-size属性设置页面默认文本大小,浏览器和用户都能识别。
  • font属性的-apple-system-body值是获得动态类型支持的关键,会覆盖font-size设置。
  • font-family可用于覆盖系统字体。
  • 为桌面浏览器添加的@media规则在窗口宽度大于 800 像素时调整字体大小。
  • 使用emrem尺寸可使元素在其他上下文中正确缩放。
  • 在 Apple 平台使用特定视图也有动态文本能力。
阅读 9
0 条评论