JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » css字体,在网页中嵌入任意字体的解决方案google在线字体库应用, 调用google在线字体库改变网页字体

css字体,在网页中嵌入任意字体的解决方案google在线字体库应用, 调用google在线字体库改变网页字体

此文被围观3016日期: 2013-01-17 分类 : 前端设计  标签:  ·······

这篇文章由于时间已经很久可能已经不适用,可以访问更新的字体资源:https://www.websiteplanet.com/blog/best-free-fonts/    

This article may not be applicable due to a long time, you can access updated font resources: https://www.websiteplanet.com/blog/best-free-fonts/



===================


自己的网站中使用谷歌的在线字体库的好处很多,对于喜欢用多种字体做网站的朋友可以省去好多流量,同时在线字体库提供了许多优秀的字体,这是自己一个人没法实现的。但缺点也是显而易见的,由于各种原因,谷歌在大陆时不时被墙了,会导致字体加载不正常,这时就只能使用备用字体了. 字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定的字体, 但是该字体并非主流操作系统的内置字体,我们常用的方法就是把特殊字体处理成图片,这样做有很多缺陷, 但是最近谷歌发布了Google在线字体库,这样在网站设计的时候只要调用Google在线字体库就可以让网页在客户端很好的显示,而不用只用枯版的字体了,实现字体多样化。 特殊字体处理成图片弊端 1、不可能大范围使用 2、不易修改 3、不利于seo优化 利用google在线的字体库优势 1、可继续使用html文本,比起自己自做字体库上传到自己的服务器可以减轻服务器负担 2、兼用性好,不需担心像各个浏览器对 CSS 解析不同导致这样那样的 bug、HACK。 3、无需引用js 但是也存在一定的弊端, 1、只能引进应为的字体库,中中文不支持 2、随时有被墙外的可能性 虽然有一定的缺陷,但是google在线字体库的有时还是很明显的,下面就介绍下具体的使用方法: header部分引用要用的字体<link rel=’stylesheet’ type=’text/css’ href=’http://fonts.googleapis.com/css?family=Font name’ >在css中使用: css selector{   Font-family: “font name”, serif; } 就是这么简单 在引用时注意一定要始终有个字体的备份方案,上面的代码你可能也发现了我使用了serif 来作为后备的字体,这样做是为了以防万一 如果你想一次行载入多个字体 http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans 字体名称之间用 | 隔开,并且不留空格,还要注意Droid Sans字体的使用,对于字体名称中有空格的,需用 + 符号来代替空格 Google在线字体库更多字体: http://www.google.com/webfonts/

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号