目前,Web 排版正掀起一股无穷无尽的创意浪潮,Google 字体已成为设计师的宝贵资源。 字体的开源特性使其成为商业和个人使用的最佳选择。 由于它是 Google 的工具,因此可访问性无疑是关键,因为它具有高质量的网络和移动版式选择,同时考虑了可读性和易读性。
字体作为最新趋势中的主要设计元素,意味着 Google 字体现在比以往任何时候都更有价值。 它的界面和下载系统非常直观和舒适,同时允许您比较所有可用的字体和样式,以满足当前的创意需求,这些形式融合了粗体字体,衬线和装饰样式等。
勺子今天重点介绍针对界面进行了优化的字体,行文中特别清晰的字体以及在各种设备上(智能手机,台式机或平板电脑)均可清晰阅读的字体。
目录
Google热门字体
针对UI优化的字体
PT Sans
Poppins
Fira Sans
Nunito
Oxygen
针对可读性和易读性进行了优化的字体
Exo 2
Open Sans
Merriweather
Noto Sans
Source Sans Pro
如何使用谷歌字体
勺子知道有两种使用谷歌或者其它字体的方法。
第一种方法是使用Web字体服务,如谷歌的字体,Webtype,Fonts.com或Typekit,并从他们的服务器下载字体,具体方法如下:
网络字体嵌入服务
Google Web字体(GWF)或Typekit允许使用其服务器上托管的字体系统。与Typekit不同 ,GWF是免费使用的,不需要您拥有帐户,而且对流量和域名没有限制(但是因为GFW的原因,我们使用会拖慢网站的速度)。Typekit根据使用字体的域名数量或站点的每月流量来收费(对于个人站长的话,还是不要考虑了)。
谷歌字体服务最有吸引力的特性之一是可以选择下载桌面版本以供项目设计阶段使用。
使用教程
使用网络字体服务非常简单:
1. 选择一种字体。您可以将其添加到集合中,也可以使用“快速使用”来生成该字体的代码和选项。
2. 将生成的代码复制并粘贴到您的<head>标签中
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
</head>
3. 现在可以在CSS代码中访问该字体
body { font-family: 'Tangerine', serif; font-size: 48px; }
你还可以查阅有关样式,脚本子集以及使用多种字体的扩展手册。
第二种方法是将字体托管在自己的服务器中,并在样式表中使用@font-face
规则,具体如下:
使用@font-face规则嵌入字体
字体独立于外部服务托管在自己的服务器上。@font-face是已弃用的CSS2规则,但是在CSS3规范中重新引入,几乎所有现代浏览器都支持。(Web字体是由不同浏览器支持的自定义字体,格式为 TTF,WOFF,EOT和SVG)。
@font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal; font-style: normal; }