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制作的20种loading动效
Jul 05 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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的分页功能
2007/03/21 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP实现计算器小功能
2020/08/28 PHP
mailto的使用技巧分享
2012/12/21 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python2.7到3.x迁移指南
2018/02/01 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
元旦文艺汇演主持词
2014/03/26 职场文书
支部组织生活会方案
2014/06/10 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
检讨书范文
2019/04/16 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle