CSS添加新字体

  • 本文以实际案例讲解如何在网页中使用系统未安装的新字体

准备工作

  1. 在网络中下载你想要的的字体
  2. 在字体转换器网站将字体转换为多种格式
  3. 学习一下转换器网站自带的demo示例(可选)

Html 文件

  • 在标签内添加你的.css样式表
<link rel="stylesheet" type="text/css" href="./site.css">

Css样式表

  • 添加自定义字体
  • 注意为了更好的兼容性,需要添加多种格式的字体文件(eot, woff, woff2 等)
@font-face {
    font-family: 'Merriweather';
    src: url('./Merriweather/Merriweather-Regular.eot');
    src: url('./Merriweather/Merriweather-Regular.eot?#iefix') format('embedded-opentype'),
        url('./Merriweather/Merriweather-Regular.woff2') format('woff2'),
        url('./Merriweather/Merriweather-Regular.woff') format('woff'),
        url('./Merriweather/Merriweather-Regular.svg#Merriweather-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Regular.eot');
    src: url('./Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('./Roboto/Roboto-Regular.woff2') format('woff2'),
        url('./Roboto/Roboto-Regular.woff') format('woff'),
        url('./Roboto/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
  • 给你想要的的字段,例如一级标题应用之前设置的字体
h1 {
    font-family: "Merriweather", sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 25px
}

这样你的html页面一级标题就可以应用新的字体了。

你可能感兴趣的:(基本素养,css,前端,html)