如何使用GOOGLE FONT?
- Google Font提供一个在线字体的平台,让所有人,包括专业的设计师与开发者可以快速、简便的使用在线字体
- Google Font都是开源的,可以自由使用和分享,也可以定制自己的字体,或者与原来的设计师共同改善他们
- 使用Google Font不用担心用户的电脑上没有这款字体
三个步骤使用Google Font
1.到https://fonts.google.com/ 里选择你喜欢的字体
2.链接到你的网页(本地网页的也行),有3个方法(把其中的Font+Name换成你所选择的字体名字)
第一个方法,在head里加上<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Font+Name”>
第二个方法,@import url(https://fonts.googleapis.com/css?family=Font+Name);
第三个方法,使用javascript
<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ Font+Name::latin,latin-ext’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
3.大功告成!尽情的使用Google Font!
.header
{
Font-family : Font+Name;
}
Example:
index.html
<DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Lakki+Reddy”>
<link rel=”stylesheet” type=”text/css” href = “style.css”>
<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Jim+Nightshade::latin,latin-ext’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</head>
<body>
<p style = “font-family : Lakki Reddy”>Hello</p>
<p style = “font-family : Inconsolata”>Hello</p>
<p style = “font-family : Jim Nightshade”>Hello</p>
<p>Hello</p>
</body>
</html>
Style.css
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
安全字体
每种操作系统都有默认安装的字体,浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同,有的甚至名称都不一样
所以,我们必须定义安全字体,字体才会正常显示
font-family: Arial, Helvetica, sans-serif;
也就是说,当用户的系统没有安装Arial,就使用Helvetica,如果还是没有,就使用sans-serif;
注意:Google Fonts 虽然很好,有时还是会有加载问题,最好还是加一个安全字体
更多讨论在 点我进入