浏览器页面字体

大多数时间,我们希望网页字体是受到我们控制的页面字体,但是问题在于,我们的网页上的字体往往并不是所有的用户电脑上都有安装对应的字体。

例如最近几年常见的 苹方黑体 ,很多电脑是没有安装对应的字体的。

字体类型

  • Sans-serif 无衬线字体
    无衬线字体意味着字体在边角不会有很多装饰性的边边角角的装饰
  • Serif 衬线字体
    衬线字体则意味着字体在笔画开始和结束的时候会有一些装饰


    字体对比.jpg
  • Monospaced 等宽字体
    等宽字体意味着每一个字符宽度都一致,最著名的就是 courier new,因为字体宽度一致,所以特别容易对齐,比较适合编码用。
  • Fantasy字体
    梦幻字体,我在这翻译为艺术字,往往不切实际,用的不多,艺术作品可能用的比较多。
  • Script 字体
    手写体,大部分为欧美地区用到,
字体列表

网络安全字体

几乎在所有常用的操作系统上都有安装的字体,(windows、Mac、linux、Android、iOS等等)

网络安全字体要感谢来自于微软90年代和21世纪初的倡议 core fonts for the web

字体名称 字体类型 注意
Arial sans-serif 通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品,尽管它们的字体面几乎相同,但 Helvetica 被认为具有更好的形状,即使Arial更广泛地可用。
Courier New monospace 某些操作系统有一个 Courier New 字体的替代(可能较旧的)版本叫Courier。使用Courier New作为Courier的首选替代方案,被认为是最佳做法。
Georgia serif
Times New Roman serif 某些操作系统有一个 Times New Roman 字体的替代(可能较旧的)版本叫 Times。使用Times作为Times New Roman的首选替代方案,被认为是最佳做法。
Trebuchet MS sans-serif 您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdana sans-serif

注意,cssfontstack.com 维护了一个windows mac操作系统中使用的网页安全字体的列表,可以有助于你对于字体的决策。

字体栈

你可以看到即使是最常用的网络安全字体,也不能够保证100%的系统都能够识别,我们往往可以使用字体栈来代替。
字体栈其实就是你在font-family里面提供一个逗号分离的字体

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

这样子,会在首个字体不存在的情况下,以此读取后面的字体,倒是一个蛮不错的办法,

注意!

上述的字体在依次顺序是变化为非衬线字体了,这对于显示效果并不好,所以如果要使用字体栈,就一定要保证显示效果是相似的。而不是在字体栈里面列出来显示效果相差甚远的几套字体。

web字体

上述的字体栈只是简单的找到了替换的方式,但是如果出现了很多电脑都没有的字体,我们也可以通过浏览器来下载我们所需要的字体。

@font-face {
        font-family:"myFont";
        src:url('./css/myFont.ttf')
}

随后你就可以把你@font-face 中声明的字体引入到你想要的地方。

注意!

  • 浏览器支持不同的字体格式,因此您需要多种字体格式以获得良好的跨浏览器支持。
    例如,
    • 大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2,Web开放字体格式版本1和2),它是最有效的格式,
    • 但是旧版本IE只支持EOT (Embedded Open Type,嵌入式开放类型)的字体,
    • 你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
  • 字体一般都不能自由使用 ,您必须为他们付费,或者遵循其他许可条件,比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

寻找你需要的字体

通常有以下几种方式来寻找字体

  • 免费的字体经销商:这是一个可以下载免费字体的网站(可能还有一些许可条件,比如对字体创建者的信赖)。比如: Font SquirredafontEverything Fonts
  • 收费的字体经销商:这是一个收费则字体可用的网站,例如fonts.commyfonts.com。您也可以直接从字体铸造厂中购买字体,例如LinotypeMonotypeExljbris
  • 在线字体服务:这是一个存储和为你提供字体的网站,它使整个过程更容易。更多细节见Using an online font service

当然你也可以寻找万能的 github.com

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容