css 制作字体

使用CSS自定义字体

在CSS中，可以通过@font-face规则引入自定义字体，并使用font-family属性应用这些字体。

@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等在线字体服务

通过链接Google Fonts或其他在线字体库，可以直接在项目中引用字体。

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

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

调整字体样式

CSS提供了多种属性来调整字体样式，包括大小、粗细、行高等。

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  font-style: italic;
  text-transform: uppercase;
}

使用系统字体堆栈

为了提高性能和兼容性，可以使用系统字体堆栈，确保在不同操作系统上显示合适的字体。

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

创建自定义字体效果

通过CSS的text-shadow、color和background-clip等属性，可以创建独特的字体效果。

h1 {
  color: transparent;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

响应式字体大小

使用vw单位或clamp()函数可以实现响应式字体大小，根据视口宽度调整字体尺寸。

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

字体优化

通过font-display属性控制字体加载行为，优化用户体验。

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2');
  font-display: swap;
}