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>实现此功能,通过 ...
随机推荐
- 开发 web 桌面类程序几个必须关注的细节
HoorayOS 写了差不多快2年了,在我的坚持下也有一部分人打算着手自己也写套类似的程序,我想我可以提供一点经验. 俗话说细节决定成败,开发2年多来,我看过大大小小类似的程序不下20个,各有优点也各 ...
- CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...
- 推荐25款实用的 HTML5 前端框架和开发工具【下篇】
快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. ...
- Web数据持久化存储IndexedDB（不常用）
IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...
- URL 路径长度限制（错误：指定的文件或文件夹名称太长）
本节讨论 URL 的构成.SharePoint 2010 构建 URL 的方式.URL 的编码和加长以及作为其他 URL 中的参数传递的方式. SharePoint URL 的构成 SharePoin ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q92-Q94)
Question 92 You are designing a SharePoint 2010 application. You need to make sure the application ...
- yii create url (一)
1.$this->redirect这里的$this是当前的controller.可能是应用程序的也 可能是模块下的 这里仅将解一下第一个参能是url,当url是一个字符串时,它会自己动跳转 如$ ...
- OC点语法和变量作用域
OC点语法和变量作用域 一.点语法 (一)认识点语法 声明一个Person类: #import <Foundation/Foundation.h> @interface Person : ...
- 【原】ios的hitTest方法以及不规则区域内触摸事件处理方法
概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...