如何使用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 虽然很好,有时还是会有加载问题,最好还是加一个安全字体

 

 

  更多讨论在 点我进入