css制作字体

使用CSS自定义字体

通过CSS的@font-face规则可以引入自定义字体文件（如.woff、.ttf格式），示例如下：

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

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

使用网络字体服务

Google Fonts等平台提供免托管的字体，直接通过<link>引入：

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

CSS中调用：

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

调整字体样式属性

常用CSS属性控制字体表现：

.text {
  font-size: 16px;        /* 字号 */
  font-weight: 700;       /* 字重 */
  font-style: italic;     /* 斜体 */
  letter-spacing: 1px;    /* 字符间距 */
  line-height: 1.6;       /* 行高 */
  text-transform: uppercase; /* 大小写转换 */
}

创建文字描边效果

通过text-stroke或text-shadow实现特殊效果：

.outline-text {
  -webkit-text-stroke: 1px black; /* 描边 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 阴影 */
}

响应式字体设置

使用vw单位或clamp()实现自适应字号：

.responsive-text {
  font-size: clamp(14px, 2vw, 24px);
}