在前端开发中使用谷歌字体

本文记录了如何使用谷歌的独门字体库神器!

谷歌字体库

网站大概长这个样

Google Fonts

网址在这

Google Fonts

在线使用

访问谷歌字体网站,选择想要使用的字体,随后页面下方会弹出一个悬浮页面,里面提供了使用该字体的方法。

一种是HTML标签link引入,然后在css中使用font-family属性

1
<link href="https://fonts.googleapis.com/css?family=XXX" rel="stylesheet">

link

另一种是使用CSS的引入方式@import,然后同样是在css中使用font-family属性

1
@import url('https://fonts.googleapis.com/css?family=XXX');

@import

离线使用

前面两种方式均是引入谷歌字体库的链接,我们也可以下载谷歌字体文件离线使用,谷歌字体提供了下载接口。

下载字体

下载之后用本地方式引入 css 中,即下面这种方式,其中

1
2
3
4
5
6
7
8
9
10
11
12

```css
@font-face {
font-family: 'xxx';
src: url('../fonts/xxx.eot');
src: url('../fonts/xxx.eot?#iefix') format('embedded-opentype'),
url('../fonts/xxx.woff') format('woff'),
url('../fonts/xxx.ttf') format('truetype'),
url('../fonts/xxx.svg#xxx') format('svg');
font-weight: normal;
font-style: normal;
}

最后

本文只介绍怎么用,至于能不能用就要看众多老司机们了,虽然大流氓曾经做过谷歌字体的代理,不过现在已经正式停止服务了。

版权声明:本文采用署名(BY)-非商业性使用(NC)-相同方式共享(SA)许可协议进行授权,转载请注明作者与出处

本文链接http://blog.floretten.com/2017/Google_Fonts/


本站已运行