【每日一记8】+第13天+托管你自己的在线字体
  

诸葛大力 4013

{{ttag.title}}
使用自托管的开源字体来定制你的网页。
字体对许多计算机用户来说可能都是很神秘的东西。举个例子,你在制作好一张很酷的传单之后,你需要将它送到某个地方去打印,结果发现,你设计的所有字体都变成了 Arial,这多半是因为打印店没用安装你设计用到的那些字体。不过,我们仍有很多方法来避免这种情况:你可以将这些使用特定字体的单词转换为路径,你也可以将它封装为 PDF,或是把开源字体封装到你的设计文件中,或者至少列出所需字体。不过,我们总会忘记一些事情,所以这仍是一个问题。

Web 上也有类似的问题。如果你对 CSS 有所了解,你可能会见过这种声明:
  • h1 { font-family: "Times New Roman", Times, serif; }

这是设计师正在尝试定义网站使用要用到的特定字体,如果用户没有安装 Times New Roman 这个字体,便会回落到另一个字体;如果用户也没有安装 Times 这个字体,便再次回落。它比使用图片而不是文本更好一些,但是在没有字体托管的情况下,这仍是一种棘手且不雅观的方法。不过,在早期的互联网时代,我们不得不这样做。

在线字体在线字体的登场,把字体管理从客户端搬上了服务端。如今网页上的字体通常由服务器为客户端渲染,而不是要求浏览器从用户的系统中查找字体。谷歌和其它供应商托管了许多开源字体,网站设计师们可以很轻松的用 CSS 来引用它们。
不过,问题是,引用这些字体并不是不花费任何代价的。虽然引用它们免费,但是像谷歌这样的巨头喜欢跟踪那些引用它们资源的网站,其中就包括了字体资源。如果你不想你的网站帮谷歌记录每个人的活动,你可以自己托管在线字体。别觉得这很难,它其实是很简单的,大概流程就是上传字体到你的主机,再使用一个简单的 CSS 便可完成。这样做还有个好处,你的网站能更快地加载,因为它会在加载每个页面的时候进行更少的外部调用。

自托管在线字体首先,你需要一个开源字体。如果你没有了解过那些令人费解的软件协议,你可能会感到很疑惑,特别是很多字体看起来都是免费的。我们中应该很少有人有字体付费意识,但是他们却在电脑上安装了一些高价的字体。不过,由于授权协议,它使得你的电脑也许带着一些   法律上不允许复制和再分发    的字体。像 Arial、Verdana、Calibri、Georgia、Impact、Lucida 和 Lucida Grande、Times 和 Times New Roman、Trebuchet、Geneva 以及其它的很多字体都是被微软、苹果和 Adobe 这种大公司所拥有的。如果你购买了一台预装了 Windows 或 macOS 的电脑,你就获得了使用这些字体的权利,但是你并没有拥有那些字体,也没有被许可上传它们至服务器(除非额外说明)。

幸运的事,开源热潮在很久以前就席卷了字体界。然后就有了许多优秀的开源字体的合集和项目,比如 The League of Moveable Type、Font Library 以及 Omnibus Type,甚至还有一些来自 Google 和 Adobe 的字体。
常见的字体格式有 TTF、OTF、WOFF、EOT 等。因为 Sorts Mill Goudy 发行过 WOFFWeb Open Font Format(互联网开放字体格式,Mozilla 参与了部分开发)版本,所以下文中我会用它来做例子。当然,其它字体的方法也是一样的。
假设你想在你的网站上使用 Sorts Mill Goudy 这个字体:

1、将字体文件 GoudyStM-webfont.woff 上传至你的服务器:
你的主机可能带有像 cPanel 这样的图形化工具,通过它们上传也是一样的。
2、在你网站的 CSS 文件中,添加 @font-face 语句,添加后应该和这个差不多:
  • @font-face {
  •   font-family: "titlefont";
  •   src: url("../fonts/GoudyStM-webfont.woff");
  • }

font-family 的值是你来决定的。这是一个易于理解的名字,它用于放在使用字体名的地方。我在这里使用 “titlefont” 作为例子,是因为我希望它被用来显示标题字体。你也可以使用 “officialfont” 和 “myfont” 这样的名字。

src 值是你字体文件的路径。这是你服务器上字体的路径。在这里,我用 fonts 目录来作为示例,它和 css 在一个文件夹里。你服务器的文件结构可能和我的不一样,所以你需要调整一下这个路径。记住一点,一个点意味着工作目录,两个点则代表父目录

3、现在,你已经定义了字体的名字和目录,你可以在任何指定的 CSS 类或 ID 来调用它了。举个例子,如果你希望以 Sorts Mill Goudy 字体来渲染 <h1>,只需要在 CSS 规则中加入你自己的字体名称:

  • h1 { font-family: "titlefont", serif; }

现在,你已经成功地托管并使用你自己的字体了。


打赏鼓励作者,期待更多好文!

打赏
暂无人打赏

呱唧呱唧 发表于 2020-6-28 22:49
  
感谢分享
新手978513 发表于 2020-6-29 10:30
  
感谢分享
头像被屏蔽
新手517842 发表于 2020-6-29 10:38
  
提示: 作者被禁止或删除 内容自动屏蔽
头像被屏蔽
新手899116 发表于 2020-6-29 10:47
  
提示: 作者被禁止或删除 内容自动屏蔽
头像被屏蔽
新手031815 发表于 2020-6-29 11:00
  
提示: 作者被禁止或删除 内容自动屏蔽
头像被屏蔽
新手741261 发表于 2020-6-29 11:18
  
提示: 作者被禁止或删除 内容自动屏蔽
sangfor_闪电回_小六 发表于 2020-7-1 11:04
  
您好,感谢楼主分享,如文章为转载的内容需附上原文链接哦!
关于笔记内容社区建议如下↓
创作笔记指南:
内容图文结合,文章不用太长,条理清晰,有实质性的参考价值,能解决实际问题;
建议笔记采用的结构:
QA(问题-答案)式结构,先说问题,再给建议或者解决方案(可以多条并列)以故障排错为例:问题现象--原因分析---排查思路和解决方法--排查结果--注意事项” 可以参考这样的组织结构写作;
杜绝复制粘贴式、抄袭、滥竽充数、灌水、过于简单的内容(否则将取消激励,造成个人时间浪费!小编会审核每一条笔记的哦)
参考案例:https://bbs.sangfor.com.cn/forum ... read&tid=100181
小霞米 发表于 2024-2-20 09:57
  
一起来学习一起来学习
蔺嘉宾 发表于 2024-2-20 09:57
  
一起来学习一起来学习
发表新帖
热门标签
全部标签>
每日一问
新版本体验
GIF动图学习
功能体验
产品连连看
纪元平台
高手请过招
标准化排查
安装部署配置
【 社区to talk】
信服课堂视频
平台使用
社区新周刊
安全效果
秒懂零信任
西北区每日一问
畅聊IT
答题自测
专家问答
技术笔记
技术圆桌
在线直播
MVP
网络基础知识
升级
安全攻防
上网策略
测试报告
日志审计
问题分析处理
流量管理
每日一记
运维工具
用户认证
原创分享
解决方案
sangfor周刊
VPN 对接
项目案例
SANGFOR资讯
专家分享
技术顾问
信服故事
SDP百科
功能咨询
终端接入
授权
设备维护
资源访问
地址转换
虚拟机
存储
迁移
排障笔记本
产品预警公告
玩转零信任
S豆商城资讯
技术争霸赛
「智能机器人」
追光者计划
2023技术争霸赛专题
卧龙计划
华北区拉练
天逸直播
以战代练
技术晨报
技术盲盒
山东区技术晨报
文档捉虫
齐鲁TV
华北区交付直播
每周精选
2024年技术争霸赛
北京区每日一练
场景专题
故障笔记
排障那些事
升级&主动服务
高频问题集锦
POC测试案例
全能先锋系列
云化安全能力
专家说
热门活动
产品动态
行业实践
产品解析
关键解决方案

本版版主

127
322
359

发帖

粉丝

关注

本版达人

你咋不高兴

本周建议达人

壹加壹网络

本周分享达人