关于外部字体的使用

╰半夏微凉° 2022-12-21 14:56 129阅读 0赞

# 字体使用 #

# 字体压缩 #

完整的字体库文件对于Web应用来说太过庞大

解决方案一：[字蛛][Link 1]

所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用不到这么多，这时候就可以使用`字蛛`压缩一下，它会识别`html`中的所有用到该字体的文字，去除没有用到的字体。

使用方法：

*  安装`npm install font-spider -g`
 *  把所有可能用到的字体都写到一个html文件`index.html`中，同时用CSS设置引入并使用外部字体
    
        /*声明 WebFont*/
          @font-face { 
            font-family: 'pinghei';
            src: url('../font/pinghei.eot');
            src:
              url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
              url('../font/pinghei.woff') format('woff'),
              url('../font/pinghei.ttf') format('truetype'),
              url('../font/pinghei.svg') format('svg');
            font-weight: normal;
            font-style: normal;
          }
        
          /*使用选择器指定字体*/
          .home h1, .demo > .test { 
              font-family: 'pinghei';
          }

> 注意：1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成 2. 开发阶段请使用相对路径的 CSS 与 WebFont

*  执行`font-spider ./index.html`

可以得到的是一个抽取后的小型的font字体文件，还有一个备份后的原字体文件。

解决方案二：

[Link 1]: http://font-spider.org/

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue引用外部字体

在 Vue 项目中引入外部字体非常简单。首先，你需要下载你想要使用的字体文件。然后，将这些字体文件放在你的项目中的某个文件夹中，比如 `assets` 文件夹。接着，在

雨点打透心脏的1/2处/ 2024年03月27日 12:08/ 0 赞/ 38 阅读

相关 itext 生成 PDF(五) 使用外部字体

在 Spring Boot 项目中，使用 iTextPDF 库的 `BaseFont.createFont()` 方法并使用外部字体，您需要将字体文件放置在项目的资源文件夹中，

我会带着你远行/ 2024年03月22日 09:26/ 0 赞/ 28 阅读

相关 uni-app使用外部字体

uni-app中当字体文件大于40kb时，需要自己转化成base64格式一：将下载好的字体文件转换成base64格式，转换地址：[https://transfonter.o

Love The Way You Lie/ 2022年12月30日 13:37/ 0 赞/ 529 阅读

相关关于使用外部字体

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：[字蛛][Link 1] 所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用

快来打我*/ 2022年12月23日 06:49/ 0 赞/ 134 阅读

相关关于外部字体的使用

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：[字蛛][Link 1] 所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用

╰半夏微凉°/ 2022年12月21日 14:56/ 0 赞/ 130 阅读

相关 css引入外部字体

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Ch

落日映苍穹つ/ 2022年09月24日 07:24/ 0 赞/ 199 阅读

相关在网页上使用外部字体格式

在网页上使用外部字体格式 1、首先下载web font的文件，其中格式有.ttf(TrueTypeFont)是由Apple公司和Microsoft公司共同推出的字体文件格式，

深藏阁楼爱情的钟/ 2022年06月02日 03:39/ 0 赞/ 249 阅读

相关 Css3引入外部字体

设计师选择了一个字体“汉仪细行楷简”,计算机本身并没有这个字体，需要下载下来才可以展示给用户。这个时候需要把你自己下载好的字体放在项目文件中，同时重新引入才可以使用外部字体

谁借莪１个温暖的怀抱￠/ 2022年05月27日 03:07/ 0 赞/ 185 阅读

相关 css引入外部字体

css引入外部字体 @font-face{ font-family: 'YaHei Consolas Hybrid'; src :

今天药忘吃喽~/ 2021年07月26日 11:35/ 0 赞/ 452 阅读

相关 uni-app 中使用外部第三方字体（非字体图标）

在用 uni-app 进行前端开发的过程中，客户可能会要求某些文字采用特殊的字体（如：微软雅黑、草书等）。如果字体文件太大，可以将需要的字单独提取出来使用，具体方法步骤如...

朱雀/ 2021年03月29日 11:04/ 0 赞/ 793 阅读