nunito字体_外贸网站设计中字体有多重要？

原文发表在麦客网络字体设计这里，更多的设计方案，请移步写给大家看的建站字体方案 - WordPress 外贸建站​www.imaiko.com写给大家看的建站配色方案 - WordPress 外贸建站​www.imaiko.com写给大家看的建站图标方案 - WordPress 外贸建站​www.imaiko.com写给大家看的建站插画方案 - WordPress 外贸建站​www.imaiko.com写给大家看的建站图片方案 - WordPress 外贸建站​www.imaiko.com写给大家看的建站布局方案 - WordPress 外贸建站​www.imaiko.com写给大家看的SEO入门方案 - WordPress 外贸建站​www.imaiko.com写给大家看的谷歌广告方案 - WordPress 外贸建站​www.imaiko.com写给大家看的提高转化方案 - WordPress 外贸建站​www.imaiko.com写给大家看的后台操作文档 - WordPress 外贸建站​www.imaiko.com

网站字体指南https://www.zhihu.com/video/1132212878136209408

须知我为设计初学者和非技术WordPress用户编写了本指南

您可以免费使用本指南

禁止销售本指南

禁止复制(部分)本指南并将其做为您自己的指南

未经我的许可，禁止在商业学习环境(商业培训)中使用本指南。

不对任何内容错误和失误，任何利润损失或任何其他商业损害承担责任。

如有问题，不要犹豫，通过http://imaiko.com上的联系表单与我联系。

前言

字体是实现良好的设计、品牌推广、可读性和无障碍功能的基础。 网页字体可实现所有上述目标以及其他目标：文本可选取、可搜索、可缩放并支持高 DPI，无论屏幕尺寸和分辨率如何，均可提供一致并且锐利的文本渲染。 网页字体是实现良好的设计、用户体验和性能的关键所在。

文字样式的设置，对于外贸网站来说这是一个小细节，但是却十分影响用户体验。外国人一般用的都是Open Sans, Serif, Sans Serif, Tahoma和trebuchetMS字体，所以如果没有特殊的设计要求，最好就用外国人常用的几种字体，这样他们也比较容易接受。字体是最基本的设计元素之一，有效地使用字体是创建一个伟大的网站的关键秘诀之一。

我们常说的字体，往往指的是子族，font-family; 而子族上面有字款(serif/ sans)，子族下边才是字体；有时候说的字体(font)也包含了字磅weight，字号 size 和字宽extend/condensed 是否斜体。我们的目的是让外贸人在一个小时以内，可以对字体有大概的了解，请记住，我们不是要成为字体专家。

将伟大的字体整合到网站并不总是容易的。

提纲如下：文字设计建议参考

字款Serif和Sans Serif

介绍常用字体 open sans

2019年最受欢迎的谷歌字体前十推荐排行榜

字体优化，去掉谷歌字体，延迟和渲染

字体工具

付费字体推荐

文字设计建议参考仅使用一种字体或者字体合集

正文字号建议15到25像素大小

标题使用大号字 x1.6-2，x2， x4

行间距建议1.2 – 1.5

每行45到90个字符(em宽度)(注意孤行寡行)

选择一种反映您网站所需的字体

使用跳跃字磅(100，300，700)更多对比bold or oblique

使用正确的字款

左对齐，眼球移动最少的体验

字款Serif和Sans Serif

在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和Serif。

Serif的意思是，在字的笔划开始及结束的地方有额外的衬线，而且笔划的粗细会因直横的不同而有不同。相反的，Sans Serif则没有这些额外的装饰，笔划粗细大致差不多。sans 在古希腊语言中是without的意思，现在英语里面也有这个词。

可以看出，我们平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。

Serif和Sans Serif的一般比较：Serif的字体容易辨认，因此易读性较高。反之Sans Serif则较醒目，但在行文阅读的情况下，Sans Serif容易造成字母辨认的困扰，常会有来回重读及上下行错乱的情形。

Serif强调了字母笔划的开始及结束，因此较易前后连续性的辨识。

Serif强调一个word，而非单一的字母，反之Sans Serif则强调个别字母。

在小字体的场合，通常Sans Serif比Serif更清晰。

通常文章的内文、正文使用的是易读性较佳的Serif字体，这可增加易读性，而且长时间阅读下因为会以word为单位来阅读，较不容易疲倦。

标题、表格内用字则採用较醒目的Sans Serif字体，它需要显着、醒目，但不必长时间盯着这些字来阅读。

像宣传品、海报类，为求醒目，它的短篇的段落也会採用Sans Serif字体。

在书籍、报刊杂志，正文有相当篇幅的情形下，则应採用Serif字体来减轻读者阅读上的负担。

在Web设计及浏览器设置中也应遵循此原则为是。

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

在不同的系统上的字体Windows英文操作系统的默认字体是Tahoma，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

Mac OS X系统有一款比Tahoma更典雅的系统默认字体：Helvetica，非Mac系统的Helvetica字体都是Rip版。

早期Windows英文系统的默认字体是Arial，XP和Vista上都是Tahoma。

Linux默认只有kernel，字体完全由用户自定义，sans-serif是针对强悍的Linux DIY族。针对这部分用户，sans-serif可能能派上用场。

介绍常用字体 open sans

Open Sans 和 Android 在 4.0 之前使用的系统字体 Droid Sans 同出于 Steve Matteson 之手。两者的设计相似，但 Open Sans 的字族更为完整，可看作使 Droid Sans 的增强版。

Open Sans 有从 Light 到 Extra Bold 的五个字重。与 Droid Sans 相比，具有真正的 cursive italic. 这使得其应用范围比较广，从标题到正文都可以有找到合适的字重。而且字符集也较大，一般的欧洲语言应该都可使用。

而回到字形设计本身，我认为 Open Sans 在人文主义无衬线体中属于偏向 Frutiger 和 Myriad 的一类，较为清晰、中性，但又不失风格，不至于去到 Grotesk 类字体的感觉。

用在屏幕显示中效果颇好，应该算是目前使用最多的 Web Font 之一。没有试过用于印刷，但效果应该也不差。字体有一些 OpenType feature, 如比例/等宽数字切换，旧式数字，和一个包含单层 g 的备用字母样式。但与同为开源字体的 Source Sans 相比，OpenType feature 偏少。

总的来说，Open Sans 虽是一款开源、免费的字体，但素质并不因此而低，反而是相当不错的。

作为一款质量上乘的 Web Font 免费且应用广泛，意味着有极大可能已经在用户的缓存内了。假如开发者用 Google Web Fonts 提供的 Open Sans，用户哪怕是第一次访问你的网站，都可以跳过下载那几十k的字体，因为在别的网站上已经下过一遍了。

码新站的时候基本把它作为默认正文字体了。。

Open Sans基本就是采Frutiger的基本造型，略修改阔度(字母设计较Frutiger阔)笔端、风格，将字重、字间距调适成网络适用，并加上潮物双层g，必是很受欢迎的字体。

如撇开Open Sans的背景，他作为一套字款本来就因为承袭Frutiger的设计优点而很好用、易认、易读，在日常的网站中便看见不少优秀例子(如Google、Dropbox等)。

Open Sans Light的表现特别优秀，如没有预算购买字体的话，也推荐大家多利用Open Sans作实验作尝试不同的版面设计，会是很不错的选择。

2019年最受欢迎的谷歌字体前十推荐排行榜

谷歌字体免费提供可能超过的成百上千种不同的子族(字体)。选择越多，也就越难。选择字体不仅仅是审美上的选择-它可以有一个真正的影响在您的网站的跳出率和转化率，特别是如果你选择的字体是很难为你的访客阅读。

那么，你如何想出最好的谷歌的字体，当这么多的，这是主观的列表？我们不希望这整个列表是主观的，所以我们要去的数据打造最好的谷歌的字体列表。

基本上，我们将使用谷歌的字体分析相信群众的智慧。拥有超过230000亿总字体的意见，谷歌的数据只是一点点从拉。

准备？让我们来深入了解…

Sans-serif

款式： 12

Roboto是由谷歌开发的Android的系统字体。它现在广受欢迎，有12种不同的风格。Roboto是最流行的字体。Roboto Condensed 也是排名第六流行的字体，Roboto Slab排名13。

2.Open SansSans-serif

款式： 10

Sans-serif是由史蒂夫·马特森开发的sans-serif字体。谷歌将Sans Serif用在它自己的一些网站，以及在其印刷和网络广告。

3.LatoSans-serif

款式： 10

Lato是另一种流行的无衬线字体，作者Łukasz Dziedzic。

4.Slabo 27px/13pxSerif

风格： 2

Slabo是约翰·哈德森开发了serif字体。这个字体独特之处在于它仅仅用于专门用于字体大小，27px或13像素。

5.OswaldSans Serif

风格： 6

奥斯瓦尔德最初是由弗农·亚当斯制作。

6.Source Sans Prosans

款式： 12

Source Sans Pro 是保罗·亨特从为Adobe创建，并且是其第一个开放源码的字体。

7.Montserrat无衬线

款式： 18

Montserrat是Julieta Ulanovsky制作，谁住在布宜诺斯艾利斯附近的Montserrat。18种不同的风格，你有相当多的选择。

8. Raleway无衬线

款式： 18

18种不同的风格，Raleway是另一个大字族sans-serif字体，最初由马特·麦金纳尼创建。。

9. PT Sans无衬线

风格： 4

PT三世是为俄罗斯联邦的公共类型开发，正因为如此，包括拉丁文和西里尔字母。还有其他几种字体的PT系列，包括一些衬线的选项。

10.Lora衬线

风格： 4

劳拉在屏幕上和打印都表现非常出色，serif字体。

11.Noto Sans / Serif无衬线或衬线

样式： 4每个

Noto Sans / Serif包括衬线和无衬线版本谷歌委托字体。它定期更新，并且现在有超过100种的字体，将来还有更多！号称世界上所有的语言字符都包含在内，总文件已经超过1G大小。

12.Nunito Sans无衬线

款式： 14

Nunito Sans 在迅速的日益普及，自去年它的使用增加了两倍，无衬线字体。

13.Concert One无衬线

风格： 1

Concert One一个是圆形的怪诞字样，常用于标题。

14.Prompt无衬线

款式：18

Prompt由泰国通信设计公司，无衬线。

15.Work Sans无衬线

风格：9

Work Sans 是为屏幕优化设计的sans-serif字体。设计师建议使用中等大小 从14px的-48像素。

如何使用最佳的谷歌字体组合

选择一种字体已经很难，何况还要配对正确？值得庆幸的是，已经有拿来主义可以使用。

首先，如果你使用谷歌字体网站，向下滚动页面会有建议的热门配对。

除此之外，您还可以使用喜欢的直观的网站字体配对，以获得更多的建议。

字体优化，去掉谷歌字体，延迟和渲染

网页字体优化是总体性能策略的一个关键部分。 每个字体都是一项附加资源，并且某些字体可能会阻塞文本的渲染，但不能仅仅因为网页使用了网页字体，就认为它只能降低渲染速度。 相反，如果对字体进行优化，再通过制定明智的策略对字体在网页上的加载和应用方式作出规定，就可以帮助减小网页总大小，并缩短网页渲染时间。考虑到国内加载速度等原因，有许多站长需要移除谷歌字体，一般有几种方法；插件方法，搜索类似remove Google fonts 子样，添加插件；

在Impreza主题中，只需要在Impreza——options——typography中选择即可。

自从2019年5月14日：现在谷歌的字体，您可以控制使用的字体加载display查询参数：

font-display 当前支持以下范围的值： auto | block | swap | fallback | optional。auto 使用 user-agent 所用的字体显示策略。 大部分浏览器当前使用类似于 block 的默认策略。

block 为字体指定较短的阻止期(在大部分情况下，建议值为 3 秒)以及无限的交换期。 换言之，字体未加载时，浏览器首先绘制“不可见”的文本，但在字体加载后立即交换字体。为此，浏览器将创建指标与所选字体相似的匿名字体，但所有字形皆不含“墨水”。

只有在必须以特定字样渲染文本以使页面可用时，才应使用此值。swap 为字体指定零秒的阻止期，以及无限的交换期。 这意味着字体未加载时，浏览器会立即以回退字体来绘制文本，但在字体加载后立即交换字体。 与 block 相似，仅当以特定字体渲染文本对于页面来说十分重要，但以任何字体渲染都可呈现正确的消息时，才应使用此值。 徽标文本非常适合于交换，因为使用合理的回退字体显示公司名称即可传达消息，但您最终会使用正式的字样。

fallback 为字体指定极短的阻止期(在大部分情况下，建议值为 100 毫秒或更短)以及较短的交换期(在大部分情况下，建议值为 3 秒)。 换言之，字体未加载时，首先使用回退字体来渲染字体，但在字体加载后立即交换字体。 但是，如果经过的时间过长，则在页面剩余的生命周期中将使用回退字体。 fallback 非常适合于正文等内容，对于这些内容，您希望用户尽快开始阅读，不想让新字体载入时发生的文本移动干扰其体验。

optional 为字体指定极短的阻止期(在大部分情况下，建议值为 100 毫秒或更短)以及零秒的交换期。 与 fallback 相似，此值非常适合在下载的字体可以“锦上添花”， 但对于用户体验并非至关重要时使用。 optional值让浏览器决定是否启动字体下载，而浏览器会从用户的角度出发，选择最适合的方案，即可能选择不下载，或以低优先级执行下载。 当用户的网络连接较差以及下载字体并非利用资源的最佳方式时，可以使用此方法。

font-display 在许多现代浏览器中获得采用。 随着这种属性的实施范围越来越广，浏览器采取一致行为指日可待。

付费字体推荐

以下都是有字体行业知名的设计师制作，非常多见但非常经典。

1. Helvetica

2. Frutiger

3. Myriad Pro

4. Avenir Std

5. Trajan

6. Optima Std

7. ITC Franklin Gothic Std

8. Futura

9. Bickham Script

10. Univers

11. Eurostile

12. Interstate

13. Trade Gothic

14. Gill Sans

15. Warnock

16. Kepler

17. Bodoni

18. Bembo

19. Rockwell

20. Meta

21. Gotham

点击查看http://fonts.com 上销量最好的Web字体。

一般来说，一个字族(通常所说的字体)包含了不同的Black/Bold/Normal/Thin/Extra Thin/Ultra Thin字磅，Condensed/Extended宽窄，Oblique斜体等等，叫做字体样式，font-style，通常一个子族family有2-10个不同的style，而一个Style的价格在35美金左右。

如果一个网站用2个字族，各自三个字体样式，大约需要2x3x35=210刀。

严肃的做品牌的商业设计，这一部分是必须的，对于VI来说也是其中的一小部分。除了用于Web，字体还用在 Desktop, Digital Ad, eBook, Mobile App 和 Server。

字体上传

当你有一些自定义的字体(或不想从谷歌加载字体)，你就可以上传字体文件，并利用它们作为主题元素单独的字体。

字体格式有四种：WOFF2、WOFF、EOT 和 TTF。

目前网络上使用的字体容器格式有四种： EOT、 TTF、 WOFF 和 WOFF2。 遗憾的是，尽管选择范围很广，但仍然缺少在所有新旧浏览器上都能使用的单一通用格式： EOT 只有 IE 支持，TTF 获得了部分 IE 支持，WOFF 获得了最广泛的支持，但在某些较旧的浏览器上不受支持，而 WOFF 2.0 支持对许多浏览器来说尚未实现。

只有WOFF和woff2字体类型Impreza主题可以接受。

如果你不关心观看在Internet Explorer 11和UC浏览器的Android您的网站，只需使用woff2只有文件，因为它们具有最小的尺寸。检查浏览器的支持。为了您的字体文件转换为WOFF和woff2类型，我们建议使用Web字体生成器：

当你有需要的文件，去翼豹>主题选项>印刷术>上传字体，并将其上传的加入群内。

如果您有相同的字体的不同的字体权重不同的文件，你应该上传的权重作为单独的组，并设置相同的字体名称为这些群体。检查截图的例子：

常规字体文件对应于400，加粗字体文件对应于700，但字体名称是在这两个群体是相同的。这种组合将产生1种字体与2点的权重，并将其添加到主题元素的字体选择选项。

你能够使用上传字体：主题选项>印刷术>默认值(页面刷新后) Theme Options > Typography > Defaults (after page refresh)

主题选项>印刷术>标题(页面刷新后) Theme Options > Typography > Headings (after page refresh)

主题选项>按钮(页面刷新后)Theme Options > Buttons (after a page refresh)

在头元素 Elements in Headers

在网格布局元素 Elements in Grid Layouts

在WPBakery编辑元素 Elements in WPBakery editor

通过自定义CSS的任何元素：any element via custom CSS: .your_element { font-family: Font Name; }

完