css3 @font-face
很长时间，web设计师总是得用一些“web-safe”字体，英文用body{font-family:"corbel", Arial, Sans-serif; }中文用body{font-family:"微软雅黑" }现在@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
原理是：字体文件放到web服务器，在需要的时候被自动下载到用户的计算机上。
一、@font-face介绍
语法：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
参数说明：
YourWebFontName:此值为你自己定义的字体名称，最好是使用你下载的默认字体名称，它将被引用到你的web元素的font-family属性中。
source:自定义字体的存放路径，可以是相对路径或绝对路径。
format:指自定义字体的格式，主要用来帮助浏览器识别，其值有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight和和font-style就是定义字体是否为粗体，和字体样式。
浏览器兼容写法：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
二、使用方法
1、下载特殊字体
比如我要下载single-malta.font这个字体，下载字体链接为
http://www.dafont.com/single-malta.font
下载解压后可以看到一个ttf文件。
2、用第三方工具生成@font-face所需字体格式，即.eot,.woff,.ttf,.svg字体格式：
第三方工具链接：http://www.fontsquirrel.com/fontface/generator
具体步骤是在WEBFONT GENERATOR页面上传第一步下载的字体，然后下载解压。
下载解压后发现文件夹有很多多余的demo页面和css，我们只需要.woff,.ttf,.svg,.eof四个文件。把这四个文件复制到站点的fonts目录。现在准备工作已经完成了。
3、在style.css中添加@font-face相关代码。
4、现在就可以在样式中用font-familyl。
代码如下：
<style type="text/css">
@font-face {
font-family: 'SingleMaltaRegular';
src: url(fonts/singlemalta-webfont.eot);
src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'),
url(fonts/singlemalta-webfont.ttf)format('truetype'),
url(fonts/singlemalta-webfont.woff)format('woff'),
url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
h2.singleMalta {
font-family: 'SingleMaltaRegular'
}
</style> <body>
<h2>普通字体</h2>
<h2 class="singleMalta">single malta</h2>
</body>
效果：
三、资源链接
http://www.w3cfuns.com/thread-5597432-1-1.html
获取字体
第三方生成字体工具
http://www.fontsquirrel.com/fontface/generator
css3 @font-face的更多相关文章
- css自定义字体完美解决方案example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3与页面布局学习总结（五）——Web Font与Sprite
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- CSS3魔法堂：认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- CSS3：不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- CSS3 icon font
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
随机推荐
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 设计人员应该看的15个很酷的 iOS 8 设计
苹果新一代智能手机 iPhone 6 发布已经有一段时间了,一些创意设计师已经开始在设计中采用 iOS 8 设计理念.当然,其中有些是对于未来的展望和大胆的设计.我在这里收集了15个很酷的 iOS 8 ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- 深入理解javascript---如何编写高质量的代码？
如何书写可维护的代码? 最小全局变量 JavaScript通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的( ...
- Wifite.py 修正版脚本代码
Kali2.0系统自带的WiFite脚本代码中有几行错误,以下是修正后的代码: #!/usr/bin/python # -*- coding: utf-8 -*- """ ...
- 无线安全审计工具 Fern WiFi Cracker
使用这款工具前最好自定义一个MAC地址,以便隐藏我们的真实MAC地址信息. 由于Fern WiFi Cracker是图形界面的,不需要敲命令,所以操作起来比Aircrack-ng简单了许多. 首先选择 ...
- Web自动化测试 Selenium 3/3 https的配置
Https的信任问题处理 具体步骤如下(以demo为例) 1) ./ca.sh : 使用默认的服务器192.168.1.1的证书 ./ca.sh IP : 使用IP设置的证书 2) 以上运行后把 ge ...
- RecyclerView的下拉刷新和加载更多 动画
下拉刷新和加载更多 1.https://github.com/jianghejie/XRecyclerView 2.http://blog.csdn.net/jabony/article/detail ...
- OC中的面向对象语法3
一. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员的访问(类似机场的安检.水龙头过滤,过滤掉不合理的东西 ...
- iOS 学习 - 10下载(2) NSURLSession 图片 篇
使用NSURLSessionDownloadTask下载文件的过程与前面差不多,需要注意的是文件下载文件之后会自动保存到一个临时目录,需要开发人员自己将此文件重新放到其他指定的目录中. // // V ...