css文字字体

css文字字体

CSS 文字字体基础概念

CSS（层叠样式表）中的文字字体属性用于设置文本的字体样式。这些属性包括 font-family、font-size、font-weight、font-style 等。

font-family：定义文本的字体系列。
font-size：定义文本的大小。
font-weight：定义文本的粗细。
font-style：定义文本的样式，如斜体。

类型

衬线字体（Serif）：如 Times New Roman，具有小装饰线。
无衬线字体（Sans-serif）：如 Arial，没有装饰线。
手写体（Cursive）：如 Comic Sans MS，模仿手写风格。
等宽字体（Monospace）：如 Courier New，每个字符宽度相同。

应用场景

网站设计：根据网站的主题和风格选择合适的字体。
用户界面：为按钮、标签等 UI 元素设置字体样式。
文档排版：在电子文档中设置字体以提高可读性。

常见问题及解决方法

问题：为什么某些字体在网页上显示不出来？

原因：

字体未安装：用户的浏览器或操作系统没有安装该字体。
字体文件路径错误：如果使用自定义字体，可能是因为字体文件路径不正确。
跨域问题：如果字体文件托管在不同的域名上，可能会因为跨域问题导致无法加载。

解决方法：

使用通用字体：确保至少提供一种通用字体作为备选。
使用通用字体：确保至少提供一种通用字体作为备选。
正确引用字体文件：确保字体文件路径正确。
正确引用字体文件：确保字体文件路径正确。
处理跨域问题：在服务器端设置正确的 CORS 头。
处理跨域问题：在服务器端设置正确的 CORS 头。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Font Example</title>
  <style>
    @font-face {
      font-family: 'CustomFont';
      src: url('https://example.com/fonts/CustomFont.woff2') format('woff2'),
           url('https://example.com/fonts/CustomFont.woff') format('woff');
    }

    body {
      font-family: 'CustomFont', Arial, sans-serif;
      font-size: 16px;
      font-weight: bold;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>