css3学习总结6--CSS3字体
使用自己需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
实例
<style>
@font-face
{
font-family: myFirstFont;
src: url('singlemalta-webfont.ttf'),
url('singlemalta-webfont.eot'); /* IE9+ */
} div
{
font-family:myFirstFont;
}
</style>
使用粗体字体
您必须为粗体文本添加另一个包含描述符的 @font-face:
示例:
@font-face
{
font-family: myFirstFont;
src: url('singlemalta-webfont.ttf'),
url('singlemalta-webfont.eot'); /* IE9+ */
font-weight:bold;
}
字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
css3学习总结6--CSS3字体的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- [CSS3]学习笔记-文字与字体相关样式
1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- CSS3 学习笔记(边框 背景 字体 图片 旋转等)
边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS3学习笔记(4)-CSS3函数
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- html5--6-16 CSS3中的文字与字体
html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...
- html5--6-23 CSS3中的文字与字体
html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
随机推荐
- BZOJ 3110 [Zjoi2013]K大数查询
Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c 如果是2 a b c形式,表示询问从第a个位置到第b个位 ...
- (BZOJ4538)HNOI2016 网络
HNOI2016 Day1 T2 网络 Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互时,数 ...
- [NOIP2008] 提高组 洛谷P1155 双栈排序
题目描述 Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈S1 操作b 如果栈S1 ...
- 使用Navicat V8.0创建数据库,外键出现错误ERROR 1005: Can’t create table (errno: 121)
ERROR 1005: Can't create table (errno: 121) errno 121 means a duplicate key error. Probably the tabl ...
- vagrant up时提示 Authentication failure. Retrying
vagrant up时提示 Authentication failure. Retrying 如图,启动时就报这个错误,virtualbox启动正常 用vagrant的账号密码也可以登录 就是不能使用 ...
- 人工神经网络(ANN)
参考资料:http://www.cnblogs.com/subconscious/p/5058741.html 从函数上来看,神经网络是回归方程的级联叠加,用来逼近目标函数的,本质是一种模拟特征与目标 ...
- TCP,IP,HTTP,SOCKET区别和联系
物理层-- 数据链路层-- 传输层-- TCP协议 会话层-- 我 们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如 果没有应用层,便 ...
- UICollectionViewController用法
在iOS 6 发布前,开发人员习惯使用UITableView来展示几乎所有类型的数据集合.ios 6 为 IOS 引入了全新的控制器,用来显示数据集合,集合视图控制器是与表视图控制器类似的全新UI框架 ...
- 新浪微博客户端(1)-实现Tabbar导航栏效果
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- Usermod 命令详解 ------工作中修改shell时用 usermod -s /bin/csh home
Usermod 命令详解 2012-09-11 11:01:36 标签:usermod 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.htt ...