玩转本地“ttf”（TrueType）格式

不二如是 · 发表于 2017-2-24 15:34:56

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-3-18 16:27 编辑

在56加载了一个本地图标文件。

这里有些小技巧，作为【实用】系列介绍下。

先从w3c，随便下载一个图标类文件

icons.zip (12.86 KB, 下载次数: 126, 售价: 2 鱼币)

然后，一般在html代码文件下，创建文件，用来存储这些外部字体。

简单解释下Web下，这几个类型的字体格式：
（介绍部分，看不看在你）

类型介绍简写适用于
TrueType Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。 .ttf 适用于Firefox 3.5、Safari、Opera
OpenType 微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。 .otf 适用于Firefox 3.5、Safari、Opera
Embedded Open Type 是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。 .eot 适用于Internet Explorer 4.0+
Web Open Font Format 是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。 .woff 最新版本浏览器全覆盖
Scalable Vector Graphics 由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。 .svg 适用于Chrome、IPhone

这些格式都可以相互转化，给你个网站（传送门）

输入其中一个，然后自动帮你转换出其他几种。

现在介绍下怎么使用

很简答，打开'svg',文件会看到一堆16进制的unicode编码：

然后在代码中直接调用后四位。

具体使用过程见56、57教程。

如有更多疑问，请下放留言，或者自行度娘（建议后者）

这位鱼油，如果喜欢本系列HTML帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

冰糖橘子 · 发表于 2017-2-24 16:11:26

解救0回复

不二如是 · 发表于 2017-2-25 09:07:38

冰糖橘子发表于 2017-2-24 16:11
解救0回复

欢迎解放～

weiter · 发表于 2020-4-1 23:37:31

我来解放第三层！

沐雨尘枫 · 发表于 2022-9-9 15:41:13

好惨谈啊，为什么没有饕餮

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] 玩转本地“ttf”（TrueType）格式

马上注册，结交更多好友，享用更多功能^_^

评分