专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端特殊字体font处理 前端常用字体

ins518 2024-10-11 16:35:22 技术文章 15 ℃ 0 评论

在移动端开发中，设计在某些地方会使用特殊字体来渲染页面效果，对于前端开发来说，如果使用特殊字体很少，一两处一般都会使用图片处理，在一个大型项目中或者一个多页面活动中所有的文字标题都使用某一个特殊字体，都使用图片肯定不行

1.解决方案 -字蛛（font-spider）

在使用之前先看一下字蛛爬过后文件大小变化




压缩效果很明显

2.怎样使用

安装好 nodejs，然后执行：

npm install font-spider -g

使用方法

新建一个文件夹，把需要字体和下面html文件放进去，把特殊的字体都写到body里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: "source";
        src: url("./Alibaba-PuHuiTi-Medium.ttf");
        font-weight: normal;
        font-style: normal;
      }
      body {
        font-family: "source";
      }
    </style>
  </head>
  <body>
    <!-- UI设计的特殊文字都在这里面罗列出来 -->
    答 案 邀 请 好 友 成 功 申 请
  </body>
</html>

执行字蛛命令：font-spider index.html


这时文件夹里面多一个.font-spider就是第二张图，里面放的是原字体文件，字体爬过后的文件咱们在项目里面直接使用就行，极大节省文件大小

3.字蛛使用说明。https://github.com/aui/font-spider/blob/HEAD/README-ZH-CN.md

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表