css字体 制作

使用CSS设置字体样式

在CSS中，可以通过font-family属性指定字体，确保在不同设备和浏览器上呈现一致的视觉效果。常用字体族包括衬线体（如Georgia）、无衬线体（如Arial）和等宽字体（如Courier New）。建议设置备用字体以增强兼容性：

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

调整字体大小和粗细

font-size属性控制字体大小，支持像素（px）、相对单位（em或rem）等多种单位。font-weight用于设置粗细，取值范围从100（最细）到900（最粗），或使用关键字如bold：

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

控制字体颜色和装饰

color属性定义字体颜色，支持十六进制、RGB或颜色名称。text-decoration用于添加下划线、删除线等效果，而text-shadow可创建文字阴影：

a {
  color: #3498db;
  text-decoration: underline;
}
.title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

使用自定义字体（@font-face）

通过@font-face引入自定义字体文件（如.woff2格式），确保跨平台显示一致性。需指定字体名称和文件路径，并考虑加载性能：

@font-face {
  font-family: "CustomFont";
  src: url("fonts/custom-font.woff2") format("woff2");
}
.header {
  font-family: "CustomFont", sans-serif;
}

响应式字体设计

结合媒体查询（@media）和视口单位（vw），实现字体大小随屏幕尺寸动态调整。这种方法提升移动设备的可读性：

html {
  font-size: calc(16px + 0.5vw);
}
@media (max-width: 768px) {
  p {
    font-size: 1.1rem;
  }
}