Google字体推荐:20个最受欢迎的Google Web字体

目前,Web排版正掀起一股无穷无尽的创意浪潮,Google字体已成为设计师的宝贵资源。 字体的开源特性使其成为商业和个人使用的最佳选择。 由于它是Google的工具,因此可访问性无疑是关键,因为它具有高质量的网络和移动版式选择,同时考虑了可读性和易读性。

字体作为最新趋势中的主要设计元素,意味着Google字体现在比以往任何时候都更有价值。 它的界面和下载系统非常直观和舒适,同时允许您比较所有可用的字体和样式,以满足当前的创意需求,这些形式融合了粗体字体,衬线和装饰样式等。

勺子今天重点介绍针对界面进行了优化的字体,行文中特别清晰的字体以及在各种设备上(智能手机,台式机或平板电脑)均可清晰阅读的字体。

Google热门字体

Alegreya

Alegreya谷歌字体

B612

B612谷歌字体

Muli

Muli谷歌字体

Titillium Web

Titillium Web谷歌字体

Varela

Varela谷歌字体

Vollkorn

Vollkorn谷歌字体

IBM Plex

IBM Plex谷歌字体

Crimson Text

Crimson Text谷歌字体

Cairo

Cairo谷歌字体

BioRhyme

BioRhyme谷歌字体

Karla

Karla谷歌字体

Lora

Lora谷歌字体

Frank Ruhl Libre

Frank Ruhl Libre谷歌字体

Playfair Display

Playfair Display谷歌字体

Archivo

Archivo谷歌字体

Spectral

Spectral谷歌字体

Fjalla One

Fjalla One谷歌字体

Roboto

Roboto谷歌字体

Montserrat

Montserrat谷歌字体

Rubik

Rubik谷歌字体

Source Sans

Source sans谷歌字体

Cardo

Cardo谷歌字体

Cormorant

Cormorant谷歌字体

Work Sans

Work Sans谷歌字体

Rakkas

Rakkas谷歌字体

Concert One

Yatra One

Arvo

Lato

Abril FatFace

Ubuntu

PT Serif

Pt Serif谷歌字体

Old Standard TT

Old Standard TT谷歌字体

Oswald

Oswald谷歌字体

针对UI优化的字体

PT Sans

PT Sans谷歌字体

Poppins

Poppins谷歌字体

Fira Sans

Fira Sans谷歌字体

Nunito

Nunito谷歌字体

Oxygen

Oxygen谷歌字体

针对可读性和易读性进行了优化的字体

Exo 2

Exo 2谷歌字体

Open Sans

Open Sans谷歌字体

Merriweather

Merriweather谷歌字体

Noto Sans

Noto Sans谷歌字体

Source Sans Pro

Source Sans Pro谷歌字体

如何使用谷歌字体

勺子知道有两种使用谷歌或者其它字体的方法。

第一种方法是使用Web字体服务,如谷歌的字体WebtypeFonts.comTypekit,并从他们的服务器下载字体,具体方法如下:

网络字体嵌入服务

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; }

留下评论