在开发中一般会遇到以下几种字体的使用方法
1.安全字体
font-family: Arial, Helvetica, sans-serif;常见的安全字体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。
