面试题答案
一键面试1. 选择合适的字体
- 措施：优先选择系统自带字体，如 Arial、Roboto 等。若必须使用自定义字体，选择简洁、字重较少的字体。
- 原理：系统自带字体已安装在用户设备上，无需下载，能加快页面加载速度。简洁且字重少的自定义字体文件体积小，可减少下载时间和内存占用。
2. 字体文件格式优化
- 措施：使用多种字体格式（如 WOFF2、WOFF、TTF、EOT、SVG 等）。以 WOFF2 为主，因为它有更好的压缩率。
- 原理：不同浏览器支持的字体格式不同，多种格式可确保兼容性。WOFF2 高压缩率能减小文件大小，提升加载性能。
3. 字体加载策略
- 措施：采用
@font - face规则加载字体，并设置font - display属性。常用值有swap、block、fallback、optional。一般推荐swap或fallback。 - 原理：
font - display: swap会先显示文本的系统字体，等自定义字体加载完成后再替换，用户体验较好。fallback类似，但在一定时间内若字体未加载完成则回退到系统字体，能平衡加载时间和用户体验。
4. 文本样式优化
- 措施：避免过度使用复杂样式，如过多的阴影、渐变、描边等。尽量使用纯色背景与字体颜色，保持足够的对比度（如 AA 标准下 4.5:1 对比度）。
- 原理：复杂样式会增加浏览器渲染计算量，降低性能。合适的对比度能保证文本可读性，提升用户体验。
5. 文本排版
- 措施：设置合适的行高（如 1.5 - 2 倍字体大小）、字间距和文本对齐方式（左对齐或两端对齐）。合理分段和使用标题标签（H1 - H6）。
- 原理：合适的行高和字间距能提升阅读舒适度。正确的文本对齐和分段方式有助于用户快速定位和理解内容。标题标签能提供文档结构，方便屏幕阅读器等辅助技术使用，提升可访问性。
6. 响应式字体大小
- 措施：根据屏幕尺寸和设备类型，使用相对单位（如 em、rem）设置字体大小。媒体查询可以配合调整不同断点下的字体尺寸。
- 原理：相对单位能根据父元素或根元素字体大小动态调整，确保在不同设备上都有合适的显示效果，提升用户体验。媒体查询可针对性优化不同屏幕分辨率下的排版。
7. 文本渲染优化
- 措施：在 CSS 中设置
-webkit - font - smoothing: antialiased（针对 WebKit 内核浏览器）和-moz - osx - font - smoothing: grayscale（针对 Firefox 在 Mac 上）。 - 原理：这些属性可以让字体边缘更平滑，提升可读性和视觉效果，尤其在低分辨率屏幕上效果明显。