CSS3 @font-face 规则
指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
以下实例为在div中使用的字体:
div
{
font-family: myFirstFont;
}
语法
@font-face
{
font-properties
}
字体描述 | 值 | 说明 |
---|---|---|
font-family | name | 必需的。定义字体的名称。 |
src | URL | 必需的。定义该字体下载的网址(S) |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选。定义该字体应该如何被拉长。默认值是"正常" |
font-style | normal italic oblique |
可选。定义该字体应该是怎样样式。默认值是"正常" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认值是"正常" |
unicode-range | unicode-range | 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF" |
CSS3 @font-face 规则的更多相关文章
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- CSS3:@font-face规则
前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. ...
- css font简写规则
是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
- CSS3高性能动画
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用w ...
- CSS自学笔记(12):CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...
- CSS3+HTML5特效4 - 横向无缝滚动
先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...
- CSS3+HTML5特效3 - 纵向无缝滚动
老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
随机推荐
- 洛谷P4343 [SHOI2015]自动刷题机
题目 易得该题目中的\(n\)和\(k\)具有单调性,满足二分的性质,因此该题目而已用二分来枚举\(n\),然后对于每个\(n\)模拟出它所对应的\(k\),然后注意注意代码细节,并且当当前\(k\) ...
- Web前端开发(高级)下册-目录
多媒体与绘图 多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audi ...
- GoCN每日新闻(2019-10-15)
GoCN每日新闻(2019-10-15) GoCN每日新闻(2019-10-15) 1. Go Module 存在的意义与解决的问题 https://www.ardanlabs.com/blog/20 ...
- D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- chown与chmod的区别
chown 修改文件和文件夹的用户和用户组属性 1.要修改文件hh.c的所有者.修改为sakia的这个用户所有 chown sakia hh.c 这样就把hh.c的用户访问权限应用到sakia作为所有 ...
- 20189220 余超《Linux内核原理与分析》第八周作业
Linux内核如何装载和启动一个可执行程序 本章知识点 ELF(Executable and Linking Format)是一种对象文件的格式,用于定义不同类型的对象文件(Object files) ...
- npm install Error: EACCES: permission denied, mkdir
今天研究Electron的时候,全局安装运行 npm install electron -g时侯,报下面的错误: Error: EACCES: permission denied, mkdir '/U ...
- SQL中左连接on and条件和where条件执行先后顺序
left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. right join :右连接,返回右表中所有的记录以及左表中连接字段相等的记录. inner join: 内连接,又 ...
- @MatrixVariable的使用
@MatrixVariable的使用 博客分类: J2EE 在Spring3.2 后,一个@MatrixVariable出现了,这个注解的出现拓展了URL请求地址的功能. Matrix Varia ...
- Python之内置装饰器property
# -*- coding: utf-8 -*- # author:baoshan class Student(object): def __init__(self, name): self.name ...