css制作字体

使用CSS自定义字体

通过CSS可以引入自定义字体或调整现有字体的样式。以下是几种常见方法：

引入自定义字体文件

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

应用自定义字体

body {
  font-family: 'MyCustomFont', sans-serif;
}

调整字体样式属性

修改字体大小

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

设置字体粗细

h1 {
  font-weight: bold; /* 关键字 */
  font-weight: 700;  /* 数值 */
}

控制字体样式

em {
  font-style: italic;
}

调整字母间距

.title {
  letter-spacing: 2px;
}

使用Google Fonts等网络字体

通过link标签引入

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

通过CSS规则应用

body {
  font-family: 'Roboto', sans-serif;
}

字体渲染优化

改善字体平滑效果

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

设置字体显示策略

@font-face {
  font-display: swap; /* 交换策略 */
}

响应式字体设置

使用视口单位

h1 {
  font-size: 5vw; /* 视口宽度百分比 */
}

媒体查询调整字体

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

字体变体控制

小型大写字母

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

数字样式

.price {
  font-variant-numeric: tabular-nums;
}