谷歌字体安装指南!教你在网页上使用 Google Web font - 优设网 - UISDC

谷歌字体安装指南!教你在网页上使用 Google Web font

2016/04/28 6594评论区

google-web-font-guideline-1

现时有很多网站流行使用网页字体,这些字体大部分来自 Google Font 提供的700+免费字体,对于网页设计师和前端人员来说,是个很棒的字体库,设计师可以使用字体库提供的免费字体来网页设计,而前端人员可以直接调用 Web Font 样式,极其方便。这篇文章教你怎么用!

本文告诉你:

#1 下载 Google 字体库的免费字体,并安装到电脑上。
#2 在网页上使用 Google Web Font(网页字体)
#3 彩蛋^_^

Google.com/fonts/

#1 下载&安装 Google 字体库的免费字体

Step 1: 选择字体

进入 Google Font 页面,选择你要的字体(可在左栏或搜索框查找字体),点击「Add to Collection」添加字体,可以多选,添加后,字体会出现在网页下方的 Collection 模块下。

Step 2: 下载字体

添加好自己的字体后,接下来就点击右上角的下载按钮来下载字体,如下图:

这里我们选择「zip file」压缩包格式进行下载。

Step 3:安装字体到电脑

解压刚刚下载的字体包,把字体文件复制到操作系统的字体目录。

Windows字体目录:C:\Windows\Fonts

如果你是 MAC OS 用户,请使用字体册来安装字体,“字体册”位于“应用程序”文件夹中(在 Finder 中选取“前往”>“应用程序”)。

然后把字体直接拖进去安装即可!

字体安装完后,用户就可以在 PS, AI, WORD, PDF 等常用软件上使用它们了。

#2 在网站上使用 Google Web Font 字体

Step 1: 选择好字体后,点击「quick use」按钮

Step 2: 选择字形

大部分英文字体都有粗体、细体多个字形划分,按需选择即可。

Step 3 : 引入字体 CSS 样式表

只需要把给出的一串<link…>代码引进页面<head>里面即可,代码中300,400是设计达人网小编刚刚选择的字粗。

而这个字体名称可以看下方给出的 font-family 代码,如下图:

整个过程是十分简单的。

#3彩蛋:Google Font CDN

大陆用户访问 Google web font 比较慢,可以尝试使用提供 Google font CDN 来加速。

【优设酷站22连发!】

  1. 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:shejidaren

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/google-web-font-guideline

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里