css3个性化字体_动力节点Java学院整理


Posted in HTML / CSS onJuly 12, 2017

在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用@font-face实现个性化字体。

CSS3 @font-face

说@font-face是CSS3的新特性并不准确,因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了,不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式,其它浏览器都不支持这个格式。@font-face支持如下属性:

font-family:设置文本的字体名称。

font-style:设置文本样式。

font-variant:设置文本是否大小写。

font-weight:设置文本的粗细。

font-stretch:设置文本是否横向的拉伸变形。

font-size:设置文本字体大小。

src:设置自定义字体的相对路径或者绝对路径。

@font-face浏览器兼容性如下:
 

css3个性化字体_动力节点Java学院整理

一个简单例子

先声明一个名为ChantelliAntiquaRegular的字体,有一种老的写法是这样的:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

第一个src是兼容IE,第二个src是兼容其它浏览器。local("☺")是一种hack写法,避免从客户端加载字体,这种写法在Android系统中有BUG,改进方案是声明两个@font-face,如下:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

我们首先声明一个引用eot字体文件的@font-face,以确保它在IE中能正常工作,第二个@font-face引用了多个字体格式是为了兼容其它浏览器,它们将按顺序查找,直到找到支持的格式,这意味着同一个字体需要有多个格式。url(//:) format("no404")是一种Bulletproof写法。

其它的HTML和CSS代码如下:
 

.font-face-display {
    font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
 
<div class="font-face-display">Take me to your heart</div>

最重效果如下:

css3个性化字体_动力节点Java学院整理

免费字体网站Font Squirrel

Font Squirrel是一个非常优秀的免费字体资源网站,收集了很多高品质字体供网页设计者免费下载,还有个字体格式生成工具@font-face generator,上传一个字体文件,可以生成多种字体格式及CSS代码,非常有用。如果你需要一些优秀的免费英文字体,这是个好去处。

css3个性化字体_动力节点Java学院整理

想要丰富多彩的页面就需要有更多的字体样式,人们想出了很多字体替代方案,除了@font-face方案外还有sIFR、Cufon、Typeface.js等,还有.webfont,简单说,.webfont 就是在字体中嵌入了访问许可表,浏览器可以读出这些许可信息,并决定是否应该下载和渲染这些字体。另外还有Typekit也是一种值得关注的方案,将字体放在第三方服务器上供调用。这些方案的优缺点,将会在以后做详细的介绍。

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 #HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 #HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 #HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 #HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 #HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 #HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
You might like
php 购物车完整实现代码
2014/06/05 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python中extend和append的区别讲解
2019/01/24 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
python 爬虫请求模块requests详解
2020/12/04 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
西式结婚主持词
2014/03/14 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
父亲节寄语大全
2015/02/27 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
opencv读取视频并保存图像的方法
2021/06/04 Python
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
详解Oracle块修改跟踪功能
2021/11/07 Oracle