CSS字体修饰属性
基本属性
- font-size：设置字体大小（最常用单位px），必须有单位，否则不生效
- font-weight：设置字体粗细 400/700分别对应 normal/bold
- font-style：字体样式（是否倾斜等），一般用于清除文字默认的倾斜效果。正常：normal；倾斜italic
- line-height：行高，用于设置多行文本的间距。行高 = 上间距 + 文本高度 + 下间距。垂直居中技巧：行高属性值 = 盒子高度属性值
- font-family ：设置字体。可书写多个字体名，名字间使用逗号隔开，浏览器将依次从左向右查找，谁先有使用谁，都没有使用默认字体
- font：复合属性，一般用于设置网页文字的公共样式。font：是否倾斜 是否加粗 字号/行高 字体，个属性间使用空格隔开，其中字号和字体必须书写，否则Font属性失效，属性必须按顺序书写
- text-indent：设置文本缩进。数字 + px /数字+em（1em = 当前标签的字号大小）
- text-align：控制内容水平对齐方式 left/center/right分别对应左（默认）/居中/右
- text-decoration：设置修饰线。none/underline/line-through/overline分别对应无、下划线、删除线、上划线
- color：设置字体颜色。颜色关键字/rgb/rgba表示法/十六进制标识法
进阶技巧
- 字体加载优化：使用@font-face规则定义自定义字体，并考虑使用字体显示（font-display）策略来改善页面性能，如swap、block或fallback。
- 逻辑属性：如inline-size和block-size，它们分别对应于水平和垂直尺寸，但在不同的书写模式下会自动适应，增强了CSS的灵活性。
- CSS变量：利用CSS变量（--variable-name）可以创建可复用的样式规则，简化维护工作，尤其是在大型项目中。
- 媒体查询：结合媒体查询（@media）可以根据屏幕尺寸动态调整字体属性，确保良好的阅读体验。
- 无障碍设计：确保字体大小足够大以便阅读，避免使用过小的字号；为文本提供足够的对比度；允许用户自定义字体大小而不破坏布局。
- 最佳实践
- 响应式字体：使用相对单位（如em、rem）而非固定单位（如px），使字体能够随着视窗大小变化而调整。
- 字体堆栈：始终提供一个完整的字体堆栈，确保即使用户的系统中没有安装首选字体，也能有合适的替代方案。
- 一致性：在整个网站中保持一致的字体选择和排版风格，以增强品牌的视觉识别。
个人思考总结
通过对CSS字体修饰属性的深入理解，我认识到这些属性不仅是控制文本外观的基础工具，更是提升页面可读性和用户体验的关键。合理使用字体大小、粗细、行高、字体选择等属性，可以有效改善文本的排版效果；而修饰线、颜色等属性则可以为文本增添更多的语义信息和视觉效果。
在未来的工作中，我将继续探索CSS的最佳实践，特别是在响应式设计和无障碍设计中，合理运用这些属性，确保页面在不同设备和用户群体中都能有良好的表现。同时，我也会关注CSS的新特性（如变量、逻辑属性等），不断优化代码质量和开发效率，提升项目的可维护性和扩展性。
