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>实现此功能,通过 ...
随机推荐
- 多平台下Modbus通信协议库的设计（一）
1.背景 1.1.范围 MODBUS 是 OSI 模型第 7 层上的应用层报文传输协议, 它在连接至不同类型总线或网络的设备之间提供客户机/服务器通信. 自从 1979 年出现工业串行链路的事实标准以 ...
- C#如何用delegate实现Javascript的each方法
C#中有很多易混淆的关键词,例如delegate,Func, Action和 Predicate.Func, Action和 Predicate本质上都是delegate,下面看一下delegate概 ...
- FormatJS – 让你的 Web 应用程序国际化
FormatJS 是一个模块化的集合,保护各种 JavaScript 国际化库,例如格式化数字,日期和字符串.它包括一组建立在 JavaScript 的国际内置插件和全行业的国际化标准,再加上一套集成 ...
- Titanium中调用ios组件时语言不是本地化的解决方法
用Titanium开发的ios应用中,当调用系统组件时,尽管手机已经设置了系统语言为中文,但那些组件的界面却仍为英文.比如调用iphone中的相册组件,其界面为: 那么怎么让它跟系统语言保持一致呢? ...
- javscript闭包的准备工作 -- 作用域与作用域链
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...
- 记录一下dotnetcore.1.0.0-VS2015Tools.preview2安装不上的问题
错误提示:未指定错误 解决方案: 从这里下载:https://visualstudiogallery.msdn.microsoft.com/32f1fa1b-cdd5-4bd3-8f51-cd8f09 ...
- Thoughts on an Article from Science 'A network framework of cultural history'
Apparently, this is an excellent interdisciplinary study. This paper drawn on a simple but large dat ...
- Quartz2D复习（三） --- 涂鸦
和上一篇手势解锁不一样,手势解锁只画了一条路径,从触摸开始-->触摸移动-->触摸结束 ,然后路径完成了,渲染出来就是手势解锁了: 这次涂鸦想做到的效果是可以画很多次线段或弧,每次又可以设 ...
- MySQL 常见的sql命令
注意事项: 1.sql 使用单引号来环绕文本值(大部分数据库系统也接受双引号).如果是数值,请不要使用引号. 一.数据库 1.创建数据库 CREATE DATABASE lesson ; 创建一个名字 ...
- 自定义View之onMeasure()
1.自定义View之onMeasure() 2.onMeasure实例分析