移动Web开发字体格式选择（附.woff\.woff2 兼容性）

最新推荐文章于 2024-07-13 02:35:01 发布
最新推荐文章于 2024-07-13 02:35:01 发布
阅读量6.6k 收藏 2
点赞数 2
分类专栏： 前端开发 文章标签： Web 字体 发展历史 woff
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrqingyu/article/details/96995760
版权

在做移动开发的时候，UI设计师会提供一些定制字体，来提高产品的视觉效果。对于前端开发来说，就需要考虑字体文件的兼容性和文件的大小，在尽量保证UI效果的情况下，兼容更多的浏览器，减少资源体积，使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制，最终字体包文件都会很大，这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。

.ttf

TrueType，是Type 1(Adobe公司开发)的竞品，由苹果公司和微软一起开发，是mac系统和window系统用的最广泛的字体，一般从网上下载的字体文件都是ttf格式，点击就能安装到系统上。

.otf

OpenType，TrueType是OpenType的前身，90年代微软寻求苹果的GX排版技术授权失败，被逼自创武功取名为TrueType Open，后来随着计算机的发展，排版技术上需要更加具有表现力的字体，Adobe和微软合作开发了一款新的字体糅合了Type 1和TrueType Open的底层技术，取名为OpenType。后来OpenType被ISO组织接受为标准，称之为Open Font Format（off）。

.eot

Embedded Open Type，主要用于早期版本的IE，微软根据OpenType做了压缩，重新取名为Embedded OpenType，是其专有格式，带有版权保护和压缩。ttf和otf字体在web端来说兼容相对较好，除IE和早期的ios safari和Android不怎么支持外，其他浏览器都兼容都不错。但是由于ttf和

最低0.47元/天 解锁文章
black-heart
关注
专栏目录
woff2-parser:WOFF2字体解析器
05-16
woff2-parser WOFF2字体解析器 安装 npm install woff2 - parser 用法 var fs = require ( 'fs' ) ; var parser = require ( 'woff2-parser' ) ; fs . readFile ( 'font.woff2' , function ( err , contents ) { if ( err ) throw err ; parser ( contents ) . then ( function ( result ) { console . log ( result ) ; } ) ; } ) ; 输出： { ... " name " : { " format " : 0 , " nameRecords " : { " English " : {
TTF、TOF、WOFF 和 WOFF2 的相关概念
编程三昧
01-31 6287
字体文件不止有 TTF 格式，常见的字体格式还有 OTF、WOFF 和 WOFF2 等，今天就来总结一下它们几个的相关概念。
java 部署woff文件配置
最新发布
weixin_41352992的博客
07-13 42
Java部署woff文件配置 介绍 在Java应用程序中，有时候需要部署woff文件（Web开放字体格式）来支持网站的字体显示。在部署这些文件时，需要进行一些配置以确保文件能够正确加载和使用。本文将介绍如何在Java应用程序中配置woff文件的部署。 woff文件的作用 woff文件是一种用于网页字体的文件格式，它可以提供...
为什么font-face要同时设置ttf eof woff woff2 svg这么多格式
中国人命银行
05-21 8929
In short, font-face is very old, but only recently has been supported by more than IE. eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot is a horr
Base64的Woff2字体信息如何转成成文件
yidragon88xx的专栏
06-01 3008
这里是借助在线的Base64和字体文件转换网站来完成的。首先用到的是https://base64.guru/converter，将Base64的字符串的“base64,”后的部分拷贝到右侧Base64文本区；然后点击Decode Base64 to text,在左侧会出现如下内容 ；可以看到Text文本区将转换的结果展现出来，其为二进制格式的文件，从首字母可以看到该文件的格式为woff2，然后点击Text文本区的download按钮下载并重命名为font.woff2。如果想借助FontCreator工具查看
woff2
04-01
这是字体压缩参考代码的自述文件。 此存储库中有几个与压缩相关的模块。 brotli /包含Brotli字节级压缩算法的参考代码。 请注意，它是根据MIT许可获得许可的。 src /包含用于压缩和解压缩字体的C ++代码。 生成并运行 本文档记录了如何运行压缩参考代码。 在撰写本文时，该代码虽然旨在产生可重构为工作字体的字节流，但未完成参考解压缩代码，并且该字节流的确切格式可能会发生更改。 构建过程取决于g ++编译器。 建造 在标准的Unix风格的环境中： git clone --recursive https://github.com/google/woff2.git cd woff2 make clean all 或者，如果您的系统上已经安装了Brotli，则可以使用CMake构建可执行文件和库： git clone https://github.com/google/wof
为IIS增加svg和woff等字体格式的MIME(2003、2008)
09-30
例如，SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，WOFF（Web Open Font Format）则是专为Web设计的字体格式。当IIS遇到未知的文件类型时，它可能会返回错误，导致浏览器无法正确解析和显示内容。...
Adobe Source Code Pro 最新2.030R开发字体
09-25
- WOFF（Web Open Font Format）：是一种专门为网页设计的压缩字体格式，支持字体版权保护，有利于网页的快速加载。 - WOFF2：是WOFF的升级版，提供了更好的压缩效率，减少了字体文件的大小，进一步提升了网页性能...
前端开源库-gulp-ttf2woff
08-29
- **Web Open Font Format (WOFF)**：WOFF 是一种专门为网络设计的字体格式，由 Mozilla 基金会发起，旨在提高网页字体的兼容性和加载速度。它通过压缩技术减小字体文件大小，便于在网络上传输，同时被大多数现代...
优化Web字体渲染：字体格式、加载速度和兼容性
Web字体渲染优化的重要性 ## 1.1 为什么Web字体渲染对用户体验和页面性能的影响如此重要？ Web字体渲染是指在网页中使用自定义字体来呈现文本内容的过程。传统上，网页只能使用系统字体或者预装字体，导致页面...
有效的压缩字体方法
littleduo的博客
05-03 7440
1、使用 fonttools 压缩字体文件 需要 Python 环境，并已安装好 pip。 使用 pip 来安装 fonttools pip install fonttools 从下载已经整理好的字体编码列表文件sc_unicode.txt。 输入命令 pyftsubset YouYuan.ttf --unicodes-file=sc_unicode.txt pyftsubset YouYuan.ttf --unicodes-file=sc_unicode.txt 执行后 ...
纯前端字体文件优化实践，字体文件压缩93%!
jinchenxinglaiy的博客
04-17 4019
高保真数据可视化大屏页面，设计部同学在提供UI图的同时还会提供UI图中使用到的字体文件，例如：思源字体、微软雅黑等类型的字体。但是，通常来说UI提供的字体包都很大，大都在十几M，加载非常缓慢，严重影响用户体验。从上图可以看出，字体压缩比确实是高达93%，对比网络加载速度，同样6M带宽字体文件由原来的18s到目前的500ms，用户访问网页带来飞升一般的体验。字体文件体积大的原因主要是中文有上万个字体，可是常见的中文字体只有3000个左右，删除特殊字符以及生僻字，可以大大减小字体文件的体积。
前端网页字体优化指南
qq_24810411的博客
07-16 1908
日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。 转换字体格式 现在是 1202 年了，各主流设备基本都支持 woff2 字体格式，
WOFF2与icon字体化
iOS060302的博客
04-25 4098
如今，各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件，就会发现现在又多了一个WOFF2的格式。没错，就如其字面意思，就是WOFF2.0。 先简单回顾一下主要的web字体文件的格式: .eot ，Embedded Open Type，主要用于早期版本的IE，是其专有格式，带有版权保护和压缩。 .ttf ，TrueType，在操作系统里更为常见，在web上使用的话
web字体压缩方案
ZeroJsus的技术黑板
05-04 912
web字体压缩方案
为更快的页面提供WOFF2字体
cungui5726的博客
08-22 976
WOFF revolutionized web typography, cutting through competing and incompatible formats to create a single, universal webfont standard accepted equally by browser vendors, device manufacturers and font...
Font-face目前浏览器的兼容性
weixin_34166472的博客
02-20 338
@Font-face目前浏览器的兼容性： •Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)； •Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)； •...
小程序安卓和ios使用自定义字体，解决安卓不生效问题
weixin_43794749的博客
07-09 6239
官网介绍 官网文件的loadFontFace也可以实现自定义字体引入和使用，如果需要在app.js使用记得加上global：true，不然app.js不会执行 背景：项目中要把所有字体改为宋体，这里我使用的是font-face引入外部字体文件 准备字体文件 这里我准备的是OTF的文件，是找UI要的。 把该文件上传到自己的服务器上，生成一个访问的链接。 在app.wxss中使用 @font-face { font-family: 'SimSun700'; src: url('链接地址必须是h
iconfont.woff2
09-28
iconfont.woff2是一种字体文件格式，通常用于在网页中显示图标。它是由阿里巴巴矢量图标库提供的一种字体格式，常用于前端开发中。使用iconfont.woff2可以方便地将各种图标以字体的方式加载到网页中，并通过CSS来控制图标的大小、颜色等样式。 相比于其他图像格式，使用iconfont.woff2有以下几个优点。首先，它具有较小的文件大小，可以减少网页加载时间，提高用户体验。其次，使用iconfont.woff2可以实现矢量图标的无缝缩放，无论是放大还是缩小，图标都能保持清晰，而不会出现模糊或锯齿的情况。此外，iconfont.woff2也支持字体的各种样式效果，比如阴影、渐变等，可以实现更多的图标风格。 为了在网页中使用iconfont.woff2，我们需要在HTML文件中引入相应的CSS样式，并将字体文件放置在合适的目录下。通过设置CSS类名，我们可以使用iconfont.woff2中的各个图标。在需要显示图标的地方，我们可以使用相应的CSS类名，并设置字体大小、颜色等样式来控制图标的显示效果。 总之，iconfont.woff2是一种方便、高效的字体文件格式，使得网页开发中使用图标变得更加简单。它提供了丰富的图标库供我们选择，并且可以灵活地控制图标的显示效果，是前端开发中常用的工具之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值