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: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
随机推荐
- 记录一次MVC 3.0错误 HTTP 404您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。
在部署到IIS7时,MVC3报了一个找不到资源的错误,文件肯定是有的,而且页面是肯定报错的,也就说内部运行错误了,而MVC把错误没有抛出来而已: 所以对症下药,发觉我的项目里面用了rexs进行多语言, ...
- BZOJ 3224 TYVJ 1728 普通平衡树 [Treap树模板]
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 7390 Solved: 3122 [Submit][S ...
- Emgu学习之(一)——Emgu介绍
OpenCV“OpenCV是一个开源的计算机视觉库.OpenCV采用C/C++语言编写,可以运行在Linux/Windows/Mac等操作系统上.OpenCV还提供了Python.Ruby.MATLA ...
- abstract 类 构造函数
public abstract class CommonReq { private String TransNo { get; set; } public String SubmitData { ge ...
- jsp------实现MD5加密
index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- 初识A*算法
写这篇文章的初衷是应一个网友的要求,当然我也发现现在有关人工智能的中文站点实在太少,我在这里抛砖引玉,希望大家都来热心的参与. 还是说正题,我先拿A*算法开刀,是因为A*在游戏中有它很典型的用法,是人 ...
- hdu 2044 一只小蜜蜂
斐波那契数列变形,在本题中不是从1-N,而是从M-N 下标 1 2 3 4 5 6 7 8 9 值 1 1 2 3 5 8 ...
- CentOS7 最小化安装后启用无线连接网络
1.ip addr 找到自己的无线网接口 (ps:本人的是wlp2s0) 2.ip link set wlp2s0 up 打开无线网的驱动 3.ip link show wlp2s0 查看该网络接口的 ...
- css absolute与relative的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- delphi基本语法
本文参考自<delphi2010语法手册> 1. 工程文件结构 源文件联系着unit单元,delphi主模块源文件格式为.dpr,其他模块为.pas,一个完整程序由一个.dpr和若干.pa ...