css使用本地字体以及字体压缩

最新推荐文章于 2024-08-14 10:42:14 发布

JuneTT

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量323

点赞数 12

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/czdbgsy/article/details/140818881

版权

1.下载或提供所需的字体文件

英文字体

@font-face {
  font-family: 'Quicksand';
  src: url('./assets/iconfont/Quicksand.ttf');
}

中文字体

@font-face {
  font-family:'zh';
  src: url('./assets/iconfont/zh-CN.ttf');
}

2.使用

英文在前，而且英文不能适配中文

html {
  font-family:'Quicksand','zh','sans-serif';
}

3.中文字体压缩

中文字体较多，动辄十几M。推荐使用字蛛进行压缩

npm i font-spider -g

1.在字体文件处创建XXX.html文件

文件内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            /*             自定义字体名字*/
            font-family: 'FontSpider';
            /*             未压缩的字体文件地址*/
            src: url('./zh-CN.ttf') format('truetype')
        }
        .fontSpider{
            font-family: 'FontSpider';
        }
    </style>
</head>
<body>
<!--        记得给当前元素使用字体-->
<div class="fontSpider">
<!-- 填充需要压缩的字体  -->
    我的
</div>
</body>
</html>