当前位置：首页 > 行业动态 > 正文

html字体字型

HTML用CSS设字体字型： font-family选字体， font-size调大小， font-weight改

HTML字体与字型详解

字体设置基础

  1. HTML传统标签
    早期通过<font>标签设置字体，但已被弃用,推荐使用CSS。

    <!-不推荐 -->
<font face="宋体" size="4">文字</font>

  2. CSS字体属性

    • font-family：指定字体族,按优先级排列备选字体。
    • font-size：设置字号，可用像素（px）、百分比（%）、em等单位。
    • font-weight：字重（数值或关键词，如bold）。
    • font-style：样式（正常、斜体、倾斜）。
属性 说明 示例值
font-family 优先使用系统字体 Arial, sans-serif
font-size 控制文字大小 16px / 1rem
font-weight 字体粗细（100-900） 400（正常） / bold
font-style 斜体/倾斜 italic / oblique

字体族与备选方案

  • 通用字体族：serif（衬线）、sans-serif（无衬线）、monospace（等宽）、cursive（草书）、fantasy（装饰）。
  • 多级备选：若主字体未安装，浏览器按顺序选择备选。 
    body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

字体样式与字重

  1. 斜体与粗体

    html字体字型 第1张

    • CSS优先：font-style: italic; 或 font-weight: bold;。
    • HTML标签（语义化较弱）：<i>（斜体）、<b>（粗体）、<strong>（语义强调）。

  2. 字重分级
    | 数值 | 效果 | 关键词 |
    |——|————-|————-|
    | 100 | 极细 | thin |
    | 400 | 正常 | normal |
    | 700 | 加粗 | bold |
    | 900 | 极粗 | black |

自定义字体嵌入

  1. @font-face规则
    将本地字体文件引入网页,需声明格式兼容性。

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

  2. 在线字体库

    • Google Fonts：链接后直接调用。 
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<body style="font-family: 'Roboto', sans-serif;">...</body>

兼容性与性能优化

  1. Web安全字体
    确保多数设备能显示,推荐组合：

    • 中文："Microsoft YaHei", SimHei, sans-serif
    • 英文：Arial, sans-serif

  2. 字体加载优化

    • 使用woff2/woff格式（体积小、兼容好）。
    • 按需加载：仅嵌入所需字重与样式。
    • 子集化：通过工具（如Font Squirrel）裁剪冗余字符。

响应式设计与字体

  • 相对单位：rem（根元素字体大小）适配不同设备。 
    body {
  font-size: 1rem; / 16px /
}
h1 {
  font-size: 2rem; / 32px /
}
  • 媒体查询：根据屏幕宽度调整字号。 
    @media (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }
}

相关问题与解答

问题1：如何让中文网站支持多语言（如中英文混排）？
解答：

  1. 设置包含中英文的通用字体族， 
    body {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}
  2. 使用Unicode范围限制自定义字体（通过@font-face的unicode-range），减少加载体积。
  3. 确保英文字体（如Arial）在中文字体后作为备选,避免英文显示模糊。

问题2：自定义字体在某些浏览器无法显示怎么办？
解答：

  1. 检查格式兼容性：提供多种格式（woff2、woff、ttf），覆盖不同浏览器。 
    @font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}
  2. 测试本地文件路径：确保字体文件部署正确，路径无误。
  3. 启用MIME类型：服务器需配置.woff2等文件的font/woff2 MIME类型。
  4. 兜底方案：添加通用字体族（如sans-serif）作为
HTML
0

相关文章