关于 Web 字体:现状与未来

CSS——web字体与CSS字体图标 文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML第一步:在样式里面声明字体: 告诉别人我们自己定义的字体第二步:给盒子使用字体第三步:盒子里面添加结构追加新图标到原来库里面 web字体 字体格式 不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。 1、TureType(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、C 阅读详情

有关 Web 字体的话题正在增多,对 Web 设计师来说,他们并不关注技术细节,不管是 TrueType 的 Hinting 技术,还是 OpenType 的 Permissions Tables,他们关心的是我如何在网页中使用某款字体。

7月14日至19日,于 Atlanta 召开的 TypeCon 2009 上,人们讨论了如何在 Web 中嵌入字体(Web Font Embedding: The New State of the Debate ),关于这次会议,有以下 Twitter 消息可以参阅,Stephen Coles 的 @typographica 以及 Grant Hutchinson 的 @splorp 。

 

Web 设计师们需要什么?

Web 设计师需要更多选项,他们需要更多字体,目前,诸如 sIFR , Cufón 等 Web 字体替代方案让设计师们可以使用 Web 安全字体之外的字体实现更好的设计,然而,这些方案本质上都是一种替代方案,它们只能偶尔用于标题或少量文字。译者注:这些方案很多是通过专门工具,将某 种字体下需要显示的文字生成 Flash 素材,再将 Flash 素材嵌入网页对应的位置,这些方案的缺陷是显而易见的。

字体设计公司需要什么?

字体设计公司并不希望他们的字体原始文件被上传到网站,那样,字体很容易被盗用。CSS3 中的 @font-face 允许直接链接到字体原始文件,就像我们链接一个图片那样。

fonts

下载这些字体也象下载一个文件那样简单,显而易见的是,字体公司不喜欢这种方式。唱片业的版权模式并不适合字体业,因为字体设计还没有成为一个拥有行业协会的行业 ,他们多数都是单枪匹马,字体盗用对他们的伤害很大。

解决方案

 

向前追溯至1997年,微软开发了一个专用的嵌入式 OpenType 格式(EOT),本质上就是一种缩略版的 OpenType。EOT 只支持 IE,为了能通用,微软于2007年将 EOT 提交给 W3C (供 CSS3 使用),2007年年底,W3C 拒绝了微软的提案,理由之一是安全问题。2008年,微软又一次提交该方案,微软在提案中如是说:

嵌入字体格式(EOT)是微软开发的一种技术,允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染,浏览器根据 CSS 中 @font-face 的定义,下载,渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下,临时安装在用户的系统中。

曾有人将 EOT 描述为 OpenType 中的 DRM,而一旦 EOT 和 DRM 联系到一起 ,其前景便立刻暗淡起来。关于 EOT的技术细节,可以参阅 W3C 的 Embedded OpenType (EOT) File Format 一文。EOT到底怎么回事?简单说,字体业不愿支持。

.webfont

最近,两个备受尊重的字体设计师 Tal Leming 与 Erik van Blokland 提出了一种替代 EOT 的提案,这种技术并非专有技术,实现起来也不复杂,H&FJ 在 Twitter 上这样描述 .webfont :

小巧,开放,优雅,前瞻,现实。 (http://twitter.com/H_FJ/status/2655923216 )

简单说,.webfont 就是在字体中嵌入了访问许可表,浏览器可以读出这些许可信息,并决定是否应该下载和渲染这些字体。webfont 方案获得了字体业广泛的欢迎和支持 (甚至 TypeKit 也支持它),但这并不意味着我们很快就可以用到 .webfont,W3C 首先要确认绝大多数字体商支持该技术,然后,才会开始他们漫长而缓慢的程序,然后是浏览器对此提供支持,要完成全部过程,也许需要几年时间。

关于这一技术 David Berlow 的 Permissions Table for OpenType 提案可以给我们一些提示(技术细节 ),简单说,就是在字体文件中嵌入许可信息,比如,在字体中嵌入某个站点是否拥有使用某个字体的许可的信息。

该技术并不需要对原有的字体文件进行改动,仅仅需要在字体文件中嵌入一些额外的许可信息。有人觉得,这很好但也很危险,因为人人可以打开这个字体文 件自己编辑许可信息。该技术另一好处是,无需任何程序,CSS 的 @font-face 可以直接引用该字体,而 @font-face 正被几乎所有浏览器所支持。

其它方案

除了 .webfont ,Typekit 也是一种值得关注的方案,简单说,就是将字体放在第三方服务器上供调用。

typekit-customise

你向 Typekit 付费使用某个字体,他们给你一段 JavaScript 代码嵌入到你的网页即可,比如:

#introduction .one p {
font-family:"skolar-1","skolar-2","Palatino","Georgia","Times","serif";
}

以下是一个 Typekit 的实例(http://forabeautifulweb.com/ ):

beautiful-web-detail

最后的思考

我们需要一致意见,然而一致意见只能通过妥协获得。字体业并没有一个行业协会可以投票通过某个决议,最接近的办法是找出所有支持 .webfont 的字体公司 。尽管 .webfont 存在安全问题,然而绝大多数重量级字体公司都支持 .webfont,见 @typegirl 的 Twitter 消息 Most of the important foundries are supporting #webfont 。

如果最终无法达成一致,.webfont 将永远停留在提案阶段,如果达成一致,我们在浏览器中看到 .webfont 的最早时间恐怕也要2011到2012年。最终不管哪个方案获胜,那些字体设计师们也要抓紧时间,多数字体目前还没有为在屏幕上显示进行优化,如果他们要 和那些已经做了优化的字体(如 Verdana)竞争的话,他们前面的工作还很繁重。

本文国际来源:http://ilovetypography.com/2009/07/20/web-fonts-%E2%80%94-where-are-we/
中文翻译来源:COMSHARP CMS 官方网站

CSS Web安全字体 CSS Web安全字体作为一种有效的字体解决方案,在确保字体安全的同时,为网页设计和开发带来了诸多便利。开发者可以根据实际需求,选择合适的字体加载方法和应用场景,提升网页的美观性和用户体验。在未来的网页设计中,CSS Web安全字体将继续发挥重要作用。 阅读详情

相关推荐

前端性能优化:定制字体的现状与未来

本文深入探讨了定制网络字体的性能问题,包括常见的FOIT(闪现不可见文本)和FOUT(闪现无样式文本)问题,及其对用户体验的影响。作者提出了多种优化字体文件大小和浏览器行为的方法,并讨论了未来标准中CSS font-display属性的潜在影响。

weixin_30653091的博客 503

Web字体

认识Web字体

coolchaobing的博客 1749

从选型到阵列:基于ESP32-S3的智能硬件麦克风系统设计实战

本文详细介绍了基于ESP32-S3芯片设计智能硬件麦克风阵列的完整实战方案。从核心芯片选型、数字MEMS麦克风的参数解读与电路设计,到关键的声学结构密封、阵列布局策略,再到利用ESP-ADF框架构建音频处理流水线并集成回声消除、噪声抑制等算法,提供了从硬件到软件的全链路设计指南与避坑要点,旨在实现清晰、稳定的远场语音交互。

weixin_29173777的博客 269

网页设计中的安全字体

转载内容(来自互联网)整理如下: 点评:在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。 但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用。 1, Arial 微软公司的网页核心字体之一,最常...

weixin_33775582的博客 1102

泛微E9统一待办接口说明

需要第三方表单,在提交自己的流程后,通过【window.location.href=‘oa地址/workflow/request/ViewRequestOS.jsp?需要第三方表单,在提交自己的流程后,通过【window.location.href=‘oa地址/workflow/workflow/WfRefreshList.jsp’】通过中转页面与第三方系统对接,按照第三系统的验证方式开发中转页面中的程序。C)第三方根据相同的数据加密,结果一致就认证成功,打开流程。优点:可以灵活的对接各个系统。

泛微二次开发后端知识总结 6414

【Photoshop JSX脚本】强大的事件监听器脚本 - event_listener.jsx

新手第一次了解的事件监听一定是ScriptingListener.8bi插件,如果你对此插件有了基本运用,那么现在了解一款更方便的时间监听脚本event_listener.jsx。不再像ScriptingListener.8bi插件那样晦涩难懂。 1、准备event_listener.jsx文件到 F:\Program Files\Adobe Photoshop 2020\Presets\...

Greless的后花园 8210

详解CSS之Web 字体

在模块的第一篇文章中,我们探讨了用于样式化字体和文本的基本 CSS 特性。在这篇文章中,我们将更进一步,详细地探索 web 字体——它们允许你下载自定义字体和你的 web 页面,以允许更多不同的、自定义的文本样式。前提:基本计算机素养,HTML 基础 (学习Introduction to HTML), CSS 基础 (学习Introduction to CSS),CSS 文本和字体基础。目标...

981

RTX 4060笔记本也能跑!保姆级教程:用Ollama在Windows上部署DeepSeek-R1-8B模型

本文详细介绍了如何在RTX 4060笔记本上通过Ollama本地部署DeepSeek-R1-8B模型,提供从环境配置到性能调优的全流程优化指南。针对笔记本用户的显存、散热等问题,给出了量化模型选择、启动参数优化及散热解决方案,帮助用户在消费级硬件上高效运行大语言模型。

weixin_28745067的博客 527

Web 安全字体和网络字体 (Web Fonts)

网络安全字体是由许多操作系统预先安装的字体。虽然不是所有的系统都安装了相同的字体,但你可以使用网络安全字体堆栈来选择几种看起来类似的字体,并且安装在你想支持的各种系统上。如果你想使用预装字体以外的字体,从CSS3开始,你可以使用网络字体。英文Web安全字体合集与网络安全字体不同,网络字体没有预先安装在用户的系统中。这些字体是由用户的浏览器在渲染网页时下载的,然后应用于你的文本。使用网络字体的主要缺点是它会减慢你网站的加载时间。在旧的浏览器中,对CSS3的支持也很有限,而使用网络字体是需要CSS3的。

泯泷的博客 748

Linux环境下OpenSSH升级到 OpenSSH_9.8p1(内置保姆级教程并包含openssl升级过程)

2024年7月1日接到安全部门同事邮件通知,目前生产环境及测试环境服务器Openssh存在远程代码执行漏洞(CVE-2024-6387),漏洞等级高,且攻击者可以成功利用该漏洞获得远程root shell最高权限从而执行任意代码及命令,主要受影响版本为8.5p1

菜鸟运维升级之路 2万+

契约锁代码审计分析

但是正常来讲,定义了这么多的路由,肯定会有一个通用的判断逻辑,来判断请求的url是否和这些路由匹配。POC中有一点值得注意,Spring新一些的版本中支持以表单的形式来为参数赋值,且无需用注解。但是需要注意4.2.8的代码逻辑和新版本中的不同,此漏洞可能存在于版本大于4.2.8的版本中。方法用于解析LICENSE,先进行AES解密,再从字符串转换成json格式的License。loadPath实际判断传入的path是否和下面的path相等,如果不相等返回null。,如果包含这三个中的一个就会抛出异常。

好记性不如烂笔头 5751

html 字体设置 (web端字体设置)

html设置开源字体

ziqibit的博客 1914

计算机考研复试面试常问问题 数据结构篇(下)

计算机考研复试面试常问问题 数据结构篇(下) 使用前需知(拒绝白嫖,如果对你有帮助,你只需点个赞就行): 注意:有人在闲鱼上盗卖我的资料,而且还有很多同学买了,请各位擦亮双眼,我是整理出来免费分享给大家的! 大家请多点赞和评论,这样后面的同学更容易百度到,不至于被人盗卖,我就不加水印影响大家使用了! 第一次整理,度不好控制,有不好的地方希望大家理解,后面可能会改进,造福今年之后的同学们! ...

程序员宝藏的博客 1万+

再谈 Web 字体的现状与未来

随着 CSS3 渐入人心,Web 字体逐渐成为话题,这种即将让未来的 Web 更加丰富多彩的技术(或者说标准)拥有多种可能,虽然.webfont 即将提交 W3C,然而它的实现仍然遥遥无期,等待是痛苦的,因此,一些公司联合字体设计推出兼容 @font-face标准的技术,鉴于主流的浏览器都支持 @font-face,这种技术在 .webfont 实现之前不失为一种不错的替代品,参阅关于 W

COMSHARP CMS 专栏 2313

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

web字体库加载优化_优化Web字体以提高性能:最新技术

web字体库加载优化This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. 本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能...

culi3118的博客 1785

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

TailwindCSS自定义字体:Web字体与字体堆栈的配置

在现代Web开发中,字体选择直接影响用户体验和品牌识别。TailwindCSS(实用优先的CSS框架)提供了灵活的字体配置系统,支持自定义字体堆栈(Font Stack)和Web字体加载。本文将系统讲解字体配置的核心概念、实现方法及优化技巧,帮助开发者构建符合设计规范且性能优异的字体系统。 ## 一、字体配置基础:从主题到工具类 TailwindCSS的字体系统基于`theme.fontFa...

gitblog_01090的博客 1473

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Bracket字体优化:Web字体加载与性能平衡

在现代Web应用中,字体加载性能直接影响用户体验和核心Web指标(Core Web Vitals)。Bracket作为自托管的锦标赛系统,需要在高并发场景下保持出色的性能表现。本文将深入探讨Bracket项目的字体优化策略,帮助开发者实现Web字体加载与性能的最佳平衡。 ## Bracket当前字体架构分析 ### 现有字体配置 Bracket项目采用Mantine UI框架作为基础,当前字体...

gitblog_00859的博客 950

颠覆传统:Unbounded 字体如何重新定义开源字体的未来

在数字设计的世界里,字体不仅仅是文字的载体,更是情感的表达、品牌的延伸。然而,高质量字体的高昂授权费用常常成为设计师和开发者的痛点。Unbounded 字体项目的出现,正在彻底改变这一现状。作为全球首个通过链上资金支持的开源字体,Unbounded 不仅提供了六种字重和可变字体,更重要的是它开创了字体开发的新模式。Unbounded 字体项目由 Web3 基金会支持,采用 SIL 开放字体许可证,

gitblog_01107的博客 901

Geist字体未来路线图:从当前版本到未来发展的全面展望

Geist字体家族是Vercel与Basement Studio合作开发的现代字体系统,以其极简几何设计和像素化美学在开发者和设计师中迅速流行。作为一款专为数字时代打造的字体,Geist在代码编辑器、Web界面和品牌设计中展现出独特优势。本文将深入探讨Geist字体的当前状态、技术架构以及未来发展蓝图。 ## 🎯 Geist字体家族的当前成就 ### 现有字体变体概览 Geist字体家族目

gitblog_01028的博客 765

Leptos字体优化:Web字体加载与性能

在现代Web应用中,字体加载往往是性能优化的盲区。一个精心设计的Leptos应用可能因为字体加载策略不当而损失数秒的首屏时间。数据显示,**Web字体加载不当可导致核心Web指标(Core Web Vitals)下降40%**,直接影响用户体验和SEO排名。 本文将深入探讨Leptos框架下的字体优化策略,从基础配置到高级技巧,帮助您构建既美观又高性能的Rust Web应用。 ## 字体加载的...

gitblog_01049的博客 850

未来荧黑字体完整指南:从安装到参数化定制的终极教程

未来荧黑(Glow Sans)是一款基于思源黑体改造的开源CJK字体家族,通过创新的参数化设计实现了9种字重和5种宽度的44款字体组合。这款字体不仅继承了思源黑体的优秀兼容性,更通过现代化的设计理念,为中文排版带来了全新的视觉体验。 ## 为什么选择未来荧黑? 未来荧黑通过算法驱动的参数化设计,在思源黑体的基础上进行了全面的现代化改造。相比于传统字体,它具有以下显著优势: | 对比维度 |

gitblog_00836的博客 996

【免费下载】 探索未来:未来荧黑——开源字体的新纪元

**未来荧黑** 是一款深受启发自[思源黑体](https://github.com/adobe-fonts/source-han-sans)、[Fira Sans](https://github.com/mozilla/Fira) 和 [Raleway](https://github.com/impallari/Raleway) 的开源字体项目,它集成了简体中文、繁体中文和日文的字符集。不同于传...

gitblog_00015的博客 1032

css 排版_Web排版的未来:CSS字体4级

Web字体为设计注入了生命,帮助我们避免了在Web设计初期广泛使用的系统默认设置。 当今有许多可用的选项,因此我们有很多技巧可以提供和设置自定义字体。 CSS字体模块的第4级概述了您会喜欢的更多有趣的选项,包括一些令人兴奋的属性,例如font-min / max-size。 本文不会揭示第4级的所有细节,而是将重点介绍仍处于起步阶段的有趣部分。 冒险从现在开始! 现状 目前,我们位于两个...

Web design 教程小屋 405
上一篇: 关于 Google Chrome 操作系统的 5 个问题
下一篇: Web 设计与开发者必须知道的 15 个站点
comsharp
博客等级 码龄20年 1475粉丝 41原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值