字体属性的综合设置

字体属性的综合设置

CSS中的字体属性控制文本的视觉呈现方式，包括字体族、大小、粗细、样式等多个方面。合理设置字体属性不仅能提升网页美观度，还能优化可读性和用户体验。

字体族设置

font-family属性定义文本使用的字体族。可以指定多个字体作为备选方案，确保在不同操作系统和设备上都能正常显示。

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

这个例子中，浏览器会优先尝试使用Helvetica Neue字体，如果不可用则降级到Arial，最后使用系统默认的无衬线字体。字体名称包含空格或特殊字符时需要加引号。

字体大小控制

font-size属性设置文本大小，可用单位包括px、em、rem、%等。现代网页设计推荐使用相对单位以适应不同设备。

h1 {
  font-size: 2rem; /* 相对于根元素 */
}

p {
  font-size: 16px; /* 固定像素值 */
}

small {
  font-size: 0.875em; /* 相对于父元素 */
}

响应式设计中，可以结合媒体查询调整字体大小：

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

字体粗细与样式

font-weight控制字重，font-style控制斜体效果：

.bold-text {
  font-weight: 700; /* 等同于bold */
}

.italic-text {
  font-style: italic;
}

.oblique-text {
  font-style: oblique 14deg; /* 可指定倾斜角度 */
}

数字值100-900对应不同字重，但实际效果取决于字体是否提供这些变体。

行高与字母间距

line-height影响文本行间距，建议使用无单位值基于当前字体大小计算：

article {
  line-height: 1.6; /* 字体大小的1.6倍 */
}

.condensed {
  letter-spacing: -0.5px; /* 字母间距紧缩 */
}

.spacious {
  letter-spacing: 2px; /* 字母间距宽松 */
}

字体变体与特性

font-variant属性支持小型大写字母等特殊效果：

.small-caps {
  font-variant: small-caps;
}

.numeric {
  font-variant-numeric: oldstyle-nums; /* 旧式数字 */
}

OpenType特性可通过font-feature-settings启用：

.ligatures {
  font-feature-settings: "liga", "dlig";
}

字体简写属性

font简写属性可一次性设置多个字体相关属性：

.heading {
  font: italic 500 1.2em/1.5 "Fira Sans", sans-serif;
}

顺序为：font-style font-variant font-weight font-size/line-height font-family

可变字体应用

可变字体允许通过一个文件实现多种字重和宽度变化：

@font-face {
  font-family: "Variable Font";
  src: url("font.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-font {
  font-family: "Variable Font";
  font-weight: 350;
  font-stretch: 110%;
}

字体加载优化

使用font-display控制字体加载期间的渲染行为：

@font-face {
  font-family: "Custom Font";
  src: url("font.woff2") format("woff2");
  font-display: swap; /* 文本先用后备字体显示 */
}

预加载关键字体可改善性能：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

字体与垂直节奏

建立一致的垂直节奏时，需考虑字体大小与行高的关系：

:root {
  --baseline: 24px;
}

p {
  font-size: 16px;
  line-height: calc(var(--baseline) * 1);
  margin-bottom: var(--baseline);
}

h2 {
  font-size: 24px;
  line-height: calc(var(--baseline) * 2);
  margin-bottom: var(--baseline);
}

多语言字体支持

针对不同语言指定专用字体：

:lang(zh) {
  font-family: "Noto Sans SC", sans-serif;
}

:lang(ja) {
  font-family: "Noto Sans JP", sans-serif;
}

:lang(ar) {
  font-family: "Noto Sans Arabic", sans-serif;
  font-size: 1.1em; /* 阿拉伯文字体通常需要更大字号 */
}

字体渲染优化

改善字体在不同平台上的渲染效果：

.text {
  -webkit-font-smoothing: antialiased; /* macOS */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

响应式字体排印

使用CSS锁实现平滑的字体大小变化：

h1 {
  font-size: calc(1rem + 3vw);
  font-size: clamp(2rem, 4vw, 3rem);
}

视口单位与最小/最大值的结合确保字体大小在合理范围内缩放。

字体颜色与对比度

确保文本颜色满足WCAG对比度要求：

.text {
  color: #333;
  background-color: #fff;
  /* 对比度至少4.5:1 */
}

使用工具验证颜色组合是否满足无障碍标准。

字体阴影与效果

为文本添加装饰效果时保持可读性：

.outline-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.gradient-text {
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

字体性能考量

优化字体文件大小和加载策略：

@font-face {
  font-family: "Optimized Font";
  src: url("font-subset.woff2") format("woff2");
  unicode-range: U+000-5FF; /* 仅加载需要的字符范围 */
}

考虑使用系统字体堆栈减少外部字体依赖：

.system-ui {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}