谷歌字体安装指南!教你在网页上使用 Google Web font |
您所在的位置:网站首页 › 怎样下载字体到电脑并安装软件 › 谷歌字体安装指南!教你在网页上使用 Google Web font |
现时有很多网站流行使用网页字体,这些字体大部分来自 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 样式表 只需要把给出的一串代码引进页面里面即可,代码中300,400是设计达人网小编刚刚选择的字粗。 而这个字体名称可以看下方给出的 font-family 代码,如下图: 整个过程是十分简单的。 #3彩蛋:Google Font CDN大陆用户访问 Google web font 比较慢,可以尝试使用提供 Google font CDN 来加速。 【优设酷站22连发!】 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》 LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》 CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》原文地址:shejidaren 【优设网 原创文章 投稿邮箱:[email protected]】 ================关于优设网================ "优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。 【特色推荐】 设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。 设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。 设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com 程远 文章 6816 人气 30914.3w优设 内容总监 +关注作者 收藏 6 点赞复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。 继续阅读本文相关话题 Google 经验分享 网页字体 网页字体选择 设计达人 酷站推荐 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |