字体属性的综合设置

字体属性的综合设置

字体在网页设计中占据重要地位，直接影响可读性和视觉体验。CSS提供了丰富的字体属性，允许开发者精细控制文本的各个方面。

font-family属性

font-family定义文本的字体系列。可以指定多个字体作为备选，确保在不同设备上的兼容性。

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

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

font-size属性

font-size控制文字大小，有多种单位可供选择：

h1 {
  font-size: 2em; /* 相对单位 */
}

p {
  font-size: 16px; /* 绝对单位 */
}

small {
  font-size: 0.875rem; /* 根元素相对单位 */
}

相对单位（em、rem）更适合响应式设计，而绝对单位（px）提供精确控制。现代浏览器默认字体大小通常为16px。

font-weight属性

font-weight设置字体的粗细程度：

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

.light-text {
  font-weight: 300;
}

常见值包括normal(400)、bold(700)等。某些字体家族可能提供更多粗细变体（100-900）。

font-style属性

font-style控制字体样式：

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

italic使用专门的斜体字形，而oblique只是将常规字形倾斜。不是所有字体都支持这两种样式。

font-variant属性

font-variant处理特殊文本变体：

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

small-caps值将小写字母显示为缩小的大写字母，保持统一的外观效果。

line-height属性

line-height设置行间距，影响文本垂直排列：

article {
  line-height: 1.6; /* 无单位值，相对于当前字体大小 */
}

推荐使用无单位值，这样会继承并相对于当前元素的字体大小计算。

font简写属性

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

.heading {
  font: italic small-caps bold 1.2em/1.5 "Times New Roman", serif;
}

简写属性的顺序为：font-style font-variant font-weight font-size/line-height font-family。必须包含font-size和font-family，其他可选。

@font-face规则

@font-face允许使用自定义字体：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

现代网页推荐使用WOFF2格式，它提供更好的压缩率。font-display控制字体加载期间的显示行为。

字体特性设置

CSS3引入了更精细的字体控制：

.advanced-font {
  font-feature-settings: "kern", "liga", "clig", "calt";
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

这些属性可以启用或禁用特定的OpenType字体特性，如连字、字距调整等。

响应式字体设置

结合媒体查询创建响应式排版：

:root {
  font-size: 16px;
}

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

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

clamp()函数确保字体大小在最小值和最大值之间平滑缩放，适应不同视口尺寸。

字体加载优化

优化字体加载性能的策略：

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 
               sans-serif;
}

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional;
}

使用系统字体作为后备，设置font-display: optional可以避免布局偏移，但可能牺牲一些视觉一致性。

可变字体

现代CSS支持可变字体：

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

.dynamic-text {
  font-family: 'VariableFont';
  font-weight: 350;
  font-stretch: 110%;
}

可变字体通过一个文件提供多种样式变体，大大减少资源请求数量。

字体渲染控制

调整字体渲染方式：

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

这些属性可以改善特定平台上的字体渲染效果，但需要谨慎使用，因为它们可能影响性能。

国际化考虑

多语言网站的字体设置：

:lang(zh) {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

:lang(ja) {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

为不同语言指定合适的本地字体栈，确保字符集覆盖和阅读体验。

字体与垂直节奏

建立一致的垂直节奏：

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0 0 2.4rem;
}

h1 {
  font-size: 3.2rem;
  line-height: 4.8rem;
  margin: 2.4rem 0;
}

通过基于字体大小的间距单位创建视觉上和谐的布局。

字体性能测量

使用CSS自定义属性实现动态调整：

:root {
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;
  --text-xs: calc(var(--text-base-size) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-base-size));
  --text-md: calc(var(--text-base-size) * var(--text-scale-ratio));
}

@media (min-width: 768px) {
  :root {
    --text-base-size: 1.1em;
  }
}

这种方法便于维护一致的排版比例，同时支持响应式调整。

字体与无障碍

确保字体设置满足无障碍要求：

.content {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 70ch;
}

.no-font-resize * {
  font-size: 100% !important;
}

提供足够的对比度、可调整的字体大小和合适的行长，确保所有用户都能舒适阅读。