当前位置：首页 > CSS

css 制作字体

2026-03-31 22:03:29CSS

自定义字体引入

在CSS中，可以通过@font-face规则引入自定义字体文件。支持的文件格式包括.woff、.woff2、.ttf和.eot。以下是一个典型示例：

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

系统字体栈设置

使用系统默认字体可以提升加载性能，常见的跨平台字体栈示例：

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

字体属性控制

CSS提供多种属性精细控制字体表现：

css 制作字体

.text {
  font-size: 1.2rem;          /* 响应式尺寸单位 */
  font-weight: 600;           /* 字重范围100-900 */
  font-style: italic;         /* 斜体效果 */
  font-variant: small-caps;   /* 小型大写字母 */
  line-height: 1.6;           /* 行间距 */
  letter-spacing: 0.5px;      /* 字符间距 */
  text-transform: uppercase;  /* 大小写转换 */
}

可变字体应用

可变字体允许通过轴调整多种样式变化：

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

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

文字渲染优化

针对不同操作系统优化字体渲染效果：

css 制作字体

.optimized-text {
  -webkit-font-smoothing: antialiased;  /* macOS */
  -moz-osx-font-smoothing: grayscale;   /* Windows */
  text-rendering: optimizeLegibility;   /* 易读性优先 */
}

响应式字体处理

使用视口单位实现响应式字体大小：

.responsive-text {
  font-size: calc(16px + 0.5vw);  /* 基础16px + 视口比例 */
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 24px;
  }
}

字体加载策略

通过CSS控制字体加载行为，避免布局偏移：

@font-face {
  font-display: optional;  /* 快速回退策略 */
}

.loading-text {
  font-family: fallback-font;
  visibility: hidden;
}

.font-loaded .loading-text {
  font-family: main-font;
  visibility: visible;
}