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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
类似框架的js代码
2006/11/09 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
params有什么用
2016/03/01 面试题
在校学生职业规划范文
2014/01/08 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
事业单位考核材料
2014/05/21 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
学生逃课检讨书
2015/02/17 职场文书
户外亲子活动总结
2015/05/08 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
浅谈Python响应式类库RxPy
2021/06/14 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
php双向队列实例讲解
2021/11/17 PHP
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js