web font

文字是网页中很重要的组成部分。为文字选择一个合适的字体能够更好的展现一个网站的个性表达所要传递的信息同时吸引用户来产生兴趣。

在开发中一般会遇到以下几种字体的使用方法

1.安全字体

font-family: Arial, Helvetica, sans-serif;

这个对字体font-family的定义就是一个安全字体。每种操作系统都有自己默认安装的字体浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同有的甚至名称都不一样在这种情况下我们必须定义安全字体使字体在所有的浏览器中都能够正常显示。

常见的安全字体Arial HelveticaVerdanaTimes New Roman

2.@font-face

但是当网页设计师不满足于使用这些安全字体就会使用@font-face来把漂亮的字体在普通用户的浏览器中被正确的渲染出来

*可以在head里定义@font-face也可以在样式表里定义然后就可以在需要的元素上面设置该字体。

其中
.eot字体是IE专用字体支持这种字体的浏览器有【IE4+】
.woff字体支持的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
.otf字体被认为是一种原始的字体格式支持的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】
.ttf字体是Windows和Mac的最常见的字体是一种RAW格式支持的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

*一般@font-face里引入.eot + .ttf /.otf + svg + woff 就能达到让所有浏览器的完美支持。

有时会在@font-face的第二个src中第一个url加入local(‘笑脸’)目的是保护IE浏览器。如果没有这句IE会尝试将第二个src描述符的值读作一个路径并向服务器发出一个额外的、无用的请求。特地写了第一个src的目的也是为了保证IE能读到正确路径。

@font-face {
  font-family: 'open_sanssemibold_italic';
  src: url('opensans-semibolditalic-webfont.eot');
  src: local(''), url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
  url('opensans-semibolditalic-webfont.woff2') format('woff2'),
  url('opensans-semibolditalic-webfont.woff') format('woff'),
  url('opensans-semibolditalic-webfont.ttf') format('truetype'),
  url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
  font-weight: normal;
  font-style: normal;
 } 

字体格式
http://www.fontsquirrel.com/tools/webfont-generator
在这个网上寻找一些需要的字体下载.ttf格式的字体文件通过Generator里转换成其他的格式。

3.Google font

如果不把字体下载到本地的话可以在线引入谷歌字体

google font官网https://www.google.com/fonts

选择需要的字体后

1在head引入

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600' rel='stylesheet' type='text/css'>

2在<style></style>之间引入

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600);

3JS引入

...

再定义font-family: 'Open Sans', sans-serif;及相应的font-weight、font-style。