鱼C论坛

 找回密码
 立即注册
查看: 4276|回复: 4

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

[复制链接]
发表于 2017-2-24 15:34:56 | 显示全部楼层 |阅读模式

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

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

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

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

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

Snip20170224_534.png


先从w3c,随便下载一个图标类文件 icons.zip (12.86 KB, 下载次数: 126, 售价: 2 鱼币)

Snip20170224_533.png


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


简单解释下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


这些格式都可以相互转化,给你个网站(传送门

Snip20170224_536.png


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


现在介绍下怎么使用


很简答,打开'svg',文件会看到一堆16进制的unicode编码:
Snip20170224_537.png


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

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

如有更多疑问,请下放留言,或者自行度娘(建议后者)


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

评分

参与人数 1贡献 +3 收起 理由
睦ちゃん她爹 + 3 无条件支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-2-24 16:11:26 | 显示全部楼层
解救0回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-25 09:07:38 | 显示全部楼层

欢迎解放~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-1 23:37:31 | 显示全部楼层
我来解放第三层!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-9-9 15:41:13 | 显示全部楼层
好惨谈啊,为什么没有饕餮
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 14:49

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表