在网站页面中有时我们需要有一个好看的字体, 毕竟好看的字体会让整个页面看起来更加美观也更吸引用户, 下面给大家来介绍一下 CSS 外部字体引入的方法.
我们引入 CSS 外部字体需要利用的是 css3 的 @font-face,@font-face 是什么呢? 下面我们来看一看
@font-face 是 CSS3 中的一个模块, 它主要是把自己定义的 web 字体嵌入到你的网页中.
@font-face 的语法规则:
- @font-face {
- font-family: <YourWebFontName>;
- src: <source> [<format>][,<source> [<format>]]*;
- [font-weight: <weight>];
- [font-style: <style>];
- }
- font-family: <YourWebFontName> : 自定义字库名称 (一般设置为所引入的字库名), 后续样式规则中则通过该名称来引用该字库.
src : 设置字体的加载路径和格式, 通过逗号分隔多个加载路径和格式
说明: src 属性后还有一个 local(font name) 字段, 表示从用户系统中加载字体, 失败后才加载 webfont.
src: local(font name), url("font_name.ttf")
srouce : 字体的加载路径, 可以是绝对或相对 URL.
format : 字体的格式, 主要用于浏览器识别, 一般有以下几种 --truetype,opentype,truetype-aat,embedded-opentype,avg 等.
font-weight 和 font-style 和之前使用的是一致的.
接着我们就来看一下 CSS 外部字体引入的实现方法:
第一步, 在 CSS 中引入字体并给名字取一个合适的名字, 如下
首先要下载好字体, 并且放在了 font 目录下
- font.CSS:
- @font-face {
- font-family: 'fontnameRegular';
- src: url('fontname.eot');
- src: local('fontname Regular'),
- local('fontname'),
- url('fontname.woff') format('woff'),
- url('fontname.ttf') format('truetype'),
- url('fontname.svg#fontname') format('svg');
- }
说明:
fontname 代表字体文件名的名称
例如你的字体文件是 PHP.ttf, 那么上面的 fontname 全都要改为 PHP
font-family 定义字体的名字, 接下来的 src 是加载字体文件的位置, 之所有有多个 url 就是因为浏览器兼容问题.
第二步, 使用刚刚定义的字体, 如下
h1{font-family: fontnameRegular}
来源: http://www.css88.com/qa/css3/12500.html