前端CSS3字体详解@fontface （二）ttf文件和base64编码的互相转换

- 日理万妓 2023-06-05 08:06 33阅读 0赞

## 背景 ##

uni-app中uni-icons引入图标字体的方式如下，url中是很长一串base64的字符。这个字符其实就是字体ttf文件的base64编码，代替了引入字体文件本身。  
注：如果不知道ttf和字体图标的知识可以参考我的上一篇博客。

@font-face {
    	font-family: uniicons;
    	font-weight: normal;
    	font-style: normal;
    	src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTYBH1lsAAHcQAAAAHEdERUYAJwBmAAB28AAAAB5PUy8yWe1cyQAAAYgAAABg
    (省略一万字)AABYAAAACAAEAAQBfAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANJrTZkAAAAA2DhhuQ==)
    		format('truetype');
    }

## 将ttf转换为base64 ##

在线转码  
https://www.motobit.com/util/base64-decoder-encoder.asp  
引入方式

@font-face {font-family: "iconfont";
     src: url(data:font/truetype;charset=utf-8;base64,编码后的内容)format('truetype');
    }

## base64抓换位ttf ##

1.  打开谷歌浏览器，F12进入开发者模式，打开network。
2.  过滤器选择font
3.  右键选择新窗口打开，就会自动下载字体文件
4.  修改文件名为xx.ttf 就可以了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20230601/46aab09260d148d5ab408fd2ae66a46c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Java Base64 编码和URL编码详解

目录 1、常见的编码方式以及应用场景分析 2、数据编码和数据加密的区别 3、Java Base64 编码详解（1）Base64 编码的原理（2）Java Base

电玩女神/ 2024年03月23日 12:38/ 0 赞/ 62 阅读

相关 Java 8 - Base64-编码转换

在 Java 8 中，提供了 java.util.Base64 类来进行 Base64 编码和解码操作。 import java.util.Base64;

灰太狼/ 2023年10月12日 09:53/ 0 赞/ 36 阅读

相关前端CSS3字体详解@fontface （二）ttf文件和base64编码的互相转换

背景 uni-app中uni-icons引入图标字体的方式如下，url中是很长一串base64的字符。这个字符其实就是字体ttf文件的base64编码，代替了引入字体文件

- 日理万妓/ 2023年06月05日 08:06/ 0 赞/ 34 阅读

相关 CSS3 字体@fontface入门详解

背景做前端会遇到使用图标的问题，虽然使用图标并不复杂，偶尔遇到需要在插件中添加图标，以及自定义图标的场景。这里深入研究下图标的实现原理，方便日后在复杂场景下搞定图标问题

小鱼儿/ 2023年06月04日 15:58/ 0 赞/ 41 阅读

相关 html引用ttf字体文件

在样式表如此定义： @font-face { font-family: MyFontName;//自定义字体名称 sr

爱被打了一巴掌/ 2022年12月20日 02:09/ 0 赞/ 289 阅读

相关 js字符串和base64互相转换

//字符串转base64 function encode(str){ // 对字符串进行编码 var encode = encodeURI(s

末蓝、/ 2022年10月04日 15:57/ 0 赞/ 413 阅读

相关 Base64 编码介绍、Base64编码转换原理、算法

Base64编码，是我们程序开发中经常使用到的编码方法。它是一种基于用64个可打印字符来表示二进制数据的表示方法。它通常用作存储、传输一些二进制数据编码方法！也是MIME（多用

深藏阁楼爱情的钟/ 2022年07月11日 06:57/ 0 赞/ 281 阅读

相关 Base64编码解码原理详解

Base64编码解码原理详解 1. Base64字符的组成部分 > Base64所用字符： 0,1,2 ….9 A,B,C,D…Z a,b,c,d…z + /

墨蓝/ 2022年06月16日 08:18/ 0 赞/ 428 阅读

相关 C#中图片转换为Base64编码，Base64编码转换为图片

region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename)

清疚/ 2022年04月23日 00:58/ 0 赞/ 1460 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1077 阅读