## **字体属性简写 font**
[**font**](#font): (简写)在一个声明中设置所有的字体属性
用法1、可以用来作为 font-style, font-variant, font-weight, **font-size**(必须), line-height 和 **font-family**(必须) 属性的简写,
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
~~~
p.span{
font:15px arial,sans-serif;
}
p.span{
font: italic small-caps bold 16px/2 cursive;
}
~~~
## **所有CSS字体属性**
| 属性 | 描述 |
| -- | -- |
| [ font-style](#font-style) | 指定文本的字体样式,值:normal(常规)、italic(斜体)、oblique(倾斜体)、inherit(继承父元素) |
| [ font-variant](#font-variant) | 以小型大写字体或者正常字体显示文本。,两个值normal(默认)和small-caps <br>small-caps 让字母以小型方式显示大写<br>normal字母处于small-caps时恢复正常小写状态|
|[ font-weight](#font-weight) | 指定字体的粗细,从600开始就能明显看出粗体效果。值:normal(400)、bold(700)、bolder、lighter、100、200、300、400、500、600、700、800、900、inherit |
|[ font-size](#font-size) | 指定文本的字体大小 |
|[ line-height](#line-height) | 指定字体的粗细。 |
|[ font-family](#font-family) | 指定文本的字体系列 |
用法2、将元素的字体设置为系统字体
>[danger]如果将 font 指定为系统关键字,则它必须是以下之一:caption, icon, menu, message-box, small-caption, status-bar。
| 系统字体 | 描述 |
| --- | --- |
|caption |定义被标题控件(比如按钮、下拉列表等)使用的字体。|
|icon |定义被图标标记使用的字体。|
|menu |定义被下拉列表使用的字体。|
|message-box |定义被对话框使用的字体。|
|small-caption |caption字体的小型版本。|
|status-bar |定义被窗口状态栏使用的字体。|
~~~
p.span{
font:small-caption;
}
~~~
| 属性 | 描述 |
| -- | -- |
| [ @font-face ](#@font-face )| 自定义自己的 Web 字体 |
~~~
@font-face {
[ font-family: <family-name>; ] ||
[ src: <src>; ] ||
[ unicode-range: <unicode-range>; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: <font-feature-settings>; ] ||
[ font-variation-settings: <font-variation-settings>; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <font-weight>; ] ||
[ font-style: <font-style>; ]
}
~~~
| 字体描述 | 值 | 说明 |
| --- | --- | --- |
| font-family | name | 必需的【IE6】。定义字体的名称 |
| src | url | 必需的【IE6】。定义该字体下载的网址 |
| font-stretch | `normal`,`condensed`,`ultra-condensed`,`extra-condensed`,`semi-condensed`,`expanded`,`semi-expanded`,`extra-expanded`,`ultra-expanded` | 可选【IE9 Safari不支持】。定义该字体应该如何被拉长。默认值是"正常" |
| font-style | `normal`,`italic`,`oblique` | 可选【IE4】。定义该字体应该是怎样样式。默认值是"正常" |
| font-weight | `normal`,`bold`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900` | 可选【IE4】。定义字体的粗细。默认值是"正常" |
| unicode-range | unicode-range | 可选【IE9】。在该@font-face中定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF" |
| [font-variant](#font-variant) | 两个值normal(默认)和small-caps <br>small-caps 让字母以小型方式显示大写(即大写字母和小写字母一样大)<br>normal字母处于small-caps时恢复正常小写状态 | 可选,以小型大写字体或者正常字体显示文本。 |
| [font-feature-settings](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-feature-settings) | normal 或者 string 1(on)/0(off) | 可选【IE10】,用于控制OpenType字体中的高级印刷功能 |
| [font-variation-settings](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variation-settings) | | 可选【IE不支持】,对[variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)特征的低级控制,通过指定要更改的特征的四个字母轴名称及其值 |
format:指示浏览器对加载的这个字体用什么格式去解析,一般浏览器都能自动识别,加上是保险起见
![](https://img.kancloud.cn/97/be/97bef67ad56c9be15bcd6153cdbdc7d3_582x26.png)
### 设置字体
```
//定义多个字体重复font-face即可
@font-face {
font-family: myFirstFont;
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf') format("truetype");
}
@font-face {
font-family: 'iconfont';/*声明一个名为iconfont的字体变量*/
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
@font-face { font-family: testfont; src: url("fonts/test.otf") format("opentype"); }
```
通常有以下几种:truetype opentype truetype-aat embedded-opentype avg等
TrueType格式(.ttf)
Windows和Mac上常见的字体格式 这是一种原始格式 因此并没有为网页进行优化处理
浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
以TrueType为基础 也是一种原始格式 但提供了更多的功能
浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
针对网页进行特殊优化 因此是Web字体中的最佳格式
它是一个开放的TrueType/OpenType的压缩版 同时支持元数据包的分离
浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE专用字体格式 可以从TrueType格式创建此格式字体
浏览器支持:IE4+
SVG格式(.svg)
基于SVG字体渲染的格式
浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
### 使用字体
~~~
body{
font-family: myFirstFont;/*上面自定义的字体名或者系统自带的字体名*/
}
~~~
<span id="font-style" style="font-weight: bold;color:blue">font-style</span>
```
<div>
<span style="font-style: normal;">abc123</span>
<span style="font-style: italic;">abc123</span>
<span style="font-style: oblique;">abc123</span>
<span style="font-style: inherit;">abc123</span>
</div>
```
效果:
<div>
<span style="font-style: normal;">ccc</span>
<br>
<span style="font-style: italic;">ccc</span>
<br>
<span style="font-style: oblique;">ccc</span>
<br>
<span style="font-style: inherit;">ccc</span>
<br>
</div>
<span id="font-variant" style="font-weight: bold;color:blue">font-variant</span>
所谓“小型大写”就是,即与小写字母一样高,外形与大写字母保持一致
```
<span style="font-variant: small-caps;">AAAaaa</span>
<span style="font-variant: normal;">AAAaaa</span>
```
效果:
<div>
<span style="font-variant: small-caps;">AAAaaa</span>
<br>
<span style="font-variant: normal;">AAAaaa</span>
<br>
</div>
<span id="font-weight" style="font-weight: bold;color:blue">font-weight</span>
```
<span style="font-weight: normal">l</span>
<span style="font-weight: bold">l</span>
<span style="font-weight: bolder">l</span>
<span style="font-weight: lighter">l</span>
<br>
<span style="font-weight: 100">l</span>
<span style="font-weight: 200">l</span>
<span style="font-weight: 300">l</span>
<span style="font-weight: 400">l</span>
<span style="font-weight: 500">l</span>
<span style="font-weight: 600">l</span>
<span style="font-weight: 700">l</span>
<span style="font-weight: 800">l</span>
<span style="font-weight: 900">l</span>
```
效果:
<div>
<span style="font-weight: normal">l</span>
<span style="font-weight: bold">l</span>
<span style="font-weight: bolder">l</span>
<span style="font-weight: lighter">l</span>
<br>
<span style="font-weight: 100">l</span>
<span style="font-weight: 200">l</span>
<span style="font-weight: 300">l</span>
<span style="font-weight: 400">l</span>
<span style="font-weight: 500">l</span>
<span style="font-weight: 600">l</span>
<span style="font-weight: 700">l</span>
<span style="font-weight: 800">l</span>
<span style="font-weight: 900">l</span>
</div>
<span id="font-size" style="font-weight: bold;color:blue">font-size</span>
<span id="line-height" style="font-weight: bold;color:blue">line-height</span>
<span id="font-family" style="font-weight: bold;color:blue">font-family</span>
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体
有两种类型的字体系列名称:
1、family-name - 指定的系列名称:具体字体的名称(字体格式),比如:"times"、"courier"、"arial"、"微软雅黑"、"华文彩云"。
华文彩云效果:
![](https://img.kancloud.cn/a5/8f/a58ff8c5960df1f9b0f3526ce0a7a8b5_157x35.png)
2、generic-family - 通常字体系列名称(字体分类):比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。
花
serif:衬线字体,每个字的笔画末端都带有以恶搞小勾
![](https://img.kancloud.cn/ff/22/ff2298aab5d7fff44297c88566f8d845_331x70.png)
sans-serif:非衬线字体
![](https://img.kancloud.cn/a2/dc/a2dc2d6842f2bfcce9a463be1205aded_331x81.png)
monospace:等宽字体
cursive:草书字体
![](https://img.kancloud.cn/0e/99/0e99230d047e056417c182fde848a5f0_162x39.png)
fantasy:虚幻字体
![](https://img.kancloud.cn/aa/1d/aa1de8f2705979b659401672be3ccfca_153x42.png)
多个字体用逗号隔开,优先级从前到后,一般字体类别放到最后作为兜底前面字体都没有的情况下选择这个类别下存在的任何一个字体
```
p{
font-family:"Times New Roman",Georgia,Serif;
}
```
一般微软雅黑为第一选择,用户能不来了个显示字体,取决于用户的电脑是否安装了这个字体(微软雅黑是window自带的),如果实在想要用偏门的字体,那么就需要在css引入该字体
##
使用自己用@font-face设置的字体(这里设置字体就需要注意版权问题啦)
```
@font-face {
font-family: myFirstFont;//自定义引入的字体名
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf') format("truetype");
}
```
一般ttf格式绝大部分浏览器都支持,但是说不定那个奇葩就不支持呢,所以我们要引入其他格式(如svg、)
![](https://img.kancloud.cn/35/b0/35b066d06adfd96319015e761b3fb7e0_468x91.png)
使用此字体(这里是建议用户使用哪个字体)
~~~
body{
font-family: myFirstFont;
}
~~~
推荐
```
font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
```
- CSS
- 达到指定宽度加载css
- 选择器
- CSS 函数
- @media媒体查询
- 字体
- 图标字体
- 文本
- 光标样式cursor
- 盒子模型
- 溢出(overflow)
- 边框
- 不透明度opacity
- 背景(background)与渐变xx-gradient
- 轮廓(outline)与 阴影(box-shadow)
- 过渡属性(Transition)
- 动画属性(Animation)
- transform变形效果旋转,缩放,移动,倾斜等
- 显示、隐藏与禁用
- box-sizing与resize
- 居中对齐
- css水平居中
- css垂直居中
- 文字与相邻的元素垂直对齐
- 布局
- 高度塌陷和外边距重叠最终解决方案
- 解决float布局时高度塌陷的最终方案after伪类元素
- 子/父元素外边距重叠最终解决方案before伪类元素
- 传统布局
- position布局
- position水平居中
- position垂直居中
- position水平垂直居中
- 浮动布局
- 高度塌陷和BFC
- clear
- BFC概念及触发条件
- 表格布局
- 盒子模型布局
- 盒子水平居中布局(如margin:0 auto)
- 盒子垂直居中布局
- 相邻元素外边距重叠
- 行内元素的盒子模型
- 弹性伸缩布局flex
- 旧版本(IE不支持)
- 混合过渡版(仅IE10+生效)
- flex布局(新版)
- 多列布局columns
- grid网格布局(实验性)
- 应用与总结
- 瀑布流布局
- 流式布局(响应式布局又叫百分比布局移动端一般采用)
- 用户不能鼠标左键选择文本
- 表格
- 表单
- radio
- textarea
- select
- a连接
- ul>li有序列表与ol>li无序列表
- 伪元素
- 容器宽高100%
- 浏览器四大内核及前缀
- 移动端开发
- 长度单位与移动端
- css_移动端开发
- rem具体解决方案
- vw具体解决方案
- 兼容性问题
- 浏览器默认样式
- css预处理器
- less
- sass
- stylus
- HTML
- 标签元素
- head的子标签
- 文档元素
- 文本元素
- 嵌入元素
- 分组元素
- 表格元素
- 表单元素
- input
- 标签元素的属性
- 全局属性
- aria-*
- 事件on*
- data-*
- id
- class
- hidden
- style
- title
- draggable
- dropzone(实验性)
- dir
- autocapitalize
- contenteditable
- lang
- inputmode
- accesskey
- contextmenu(移除)
- exportparts(实验性)
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- XHTML遗留xml:lang和xml:base
- part(实验性)
- slot
- spellcheck(实验性)
- tabindex
- translate
- HTML字符实体
- 行内元素
- iframe和父页面相互传值,并兼容跨域问题
- a标签嵌套解决方案
- JS
- 获取宽度(offsetParent、clientWidth、clientHeight、offsetWidth、offsetheight、scrollWidth、scrollHeight、offsetTop、offsetLeft、scrollTop、scrollLeft)
- demo
- 全选和反选
- 定时器:
- 哪些HTML元素可以获得焦点?
- 事件例子
- 鼠标事件
- 注册条款
- 获取鼠标坐标
- div跟随鼠标移动
- 拖拽01
- 鼠标滚动事件
- 键盘事件
- 检查标签是否含有某个类
- 轮播图
- 数组的 交集 差集 补集 并集
- 精确计算插件
- 摇奖机
- 移动端跳转
- 基础
- js的数据类型
- 基本类型声明
- 引用类型声明及用法
- 数组
- 函数
- 对象及函数原型对象
- 继承
- js的垃圾回收机制
- javascript扩展自定义方法
- 类型转换
- 作用域(执行上下文)及递归调用
- javascript事件
- 连续调用
- 排序
- 内存溢出与内存泄漏
- 系统对象
- 内置对象
- 值属性
- Infinity
- NaN
- undefined
- globalThis
- Function 属性
- eval()
- isFinite()
- isNaN()
- parseFloat()
- parseInt()
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
- 基本对象(Object,Function,Boolean,Symbol)
- Object
- defineProperty()
- Function
- Boolean
- Symbol
- 数字和日期对象
- Number
- Date
- BigInt
- Math
- 控制抽象化
- AsyncFunction
- Generator
- GeneratorFunction
- Promise
- Web组装
- WebAssembly
- 结构化数据(JSON等)
- ArrayBuffer
- Atomics
- DataView
- JSON
- SharedArrayBuffer
- 使用键的集合对象
- Map
- Set
- WeakMap
- WeakSet
- 反射
- Reflect
- Proxy
- 可索引的集合对象(数组在这)
- Array数组
- BigInt64Array
- BigUint64Array
- Float32Array
- Float64Array
- Int16Array
- Int32Array
- Int8Array
- Uint8ClampedArray
- Uint8Array
- Uint16Array
- Uint32Array
- 国际化
- Intl
- Intl.Collator
- 文本处理(字符串与正则)
- RegExp
- String
- 错误对象
- Error
- InternalError
- AggregateError 实验性
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- URIError
- TypeError
- null
- TypedArray
- escape()移除但还兼容
- unescape()移除但还生效
- uneval()非标准
- arguments
- 宿主对象(DOM与Browser)
- Browser浏览器对象(BOM)
- Window 对象
- History 对象
- Location 对象
- Navigator 对象
- Screen 对象
- 存储对象(localStorage与sessionStorage)
- DOM 节点对象
- EventTarget
- Node节点对象
- Document文档节点
- HTMLDocument(HTML对象 )
- HTML 元素接口
- Element元素节点
- Attr属性对象(与NamedNodeMap )
- DocumentType
- DocumentFragment文档片段节点
- CharacterData
- Comment
- Text
- CDATASection
- 事件对象Event
- on-event处理器
- CustomEvent
- MouseEvent
- DragEvent
- 手势(TouchEvent触摸事件)
- 其他类型事件对象...
- CSSStyleDeclaration 对象
- HTMLCollection
- console对象
- MutationObserver
- 其他重要的对象(FormData与原生Ajax)
- FormData表单对象
- ajax XMLHttpRequest
- 表达式和运算符
- 算术运算符
- 赋值运算符
- 按位操作符
- 逗号操作符
- 比较操作符
- 条件运算符
- 解构赋值
- 函数表达式
- 圆括号运算符
- 逻辑运算符
- Nullish 合并操作符
- 对象初始化
- 运算符优先级
- 可选链
- 管道操作符 实验性
- 属性访问器
- 展开语法
- 异步函数表达式
- await
- 类表达式
- delete 操作符
- function* 表达式
- in
- instanceof
- new 运算符
- new.target
- super
- this
- typeof
- void 运算符
- yield
- yield*
- 语句和声明
- export
- default
- 控制流
- block
- break
- continue
- empty
- if...else
- switch
- throw
- try...catch
- 声明
- const
- let
- var 描述
- 函数和类
- async function
- class
- function
- function*
- return
- 迭代
- do...while
- for
- for await...of
- for...in
- for...of
- while
- 其他
- debugger
- label
- with 移除但生效
- import
- import.meta
- 函数
- 箭头函数
- 默认参数值
- 方法的定义
- 剩余参数
- Arguments 对象
- getter
- setter
- 类
- 类私有域
- 类元素
- 构造方法
- extends
- static
- Errors
- 更多
- 已废弃的特性
- JavaScript 数据结构
- 词法文法
- 属性的可枚举性和所有权
- 迭代协议
- 严格模式
- 切换到严格模式
- 模板字符串
- ES6(ES2015)
- Es6函数写法
- 类class
- 导入导出模块
- 兼容ES5
- 变量声明
- Symbol新数据类型
- 迭代器(自定义遍历数组)
- 生成器
- Promise异步编程
- set(集合)
- Map
- 数组新增4个方法
- 手机端事件
- bootstrap手册
- 代码压缩打包
- Webpack
- 五个核心概念
- 开始
- loader
- 插件
- webpack开发环境配置
- 打包含css文件的项目
- 打包html资源
- 打包图片资源
- 打包其他文件
- devServer(实时自动化打包)
- 总结:开发环境配置
- webpack生产环境配置
- 提取css成单独文件
- css兼容性处理
- 压缩css
- js语法检查
- js兼容性处理
- js压缩
- html压缩
- 总结:生产环境配置
- webpack优化环境配置
- HMR( 模块热替换)
- source-map
- oneOf
- 缓存
- tree shaking
- code split
- demo1
- demo2
- demo3
- lazy loading
- pwa
- 多进程打包
- externals
- dll
- webpack配置详解
- entry
- output
- module
- resolve
- dev server
- optimization
- vite
- 技能
- 前端学习路线
- 调试
- 多个版本IE浏览器(调试用)
- 手机端调试
- vueJS
- Element UI(一个vuejs组件)
- 浏览器插件开发
- 插件推荐
- 扩展文件manifest.json
- 不可视的background(常驻)页面
- 可视页面browser actions与page actions及八种展示方式
- 使用chrome.xxx API
- Google Chrome扩展与Web页面/服务器之间的交互
- Google Chrome扩展中的页面之间的数据通信
- inject-script
- chromeAPI
- pageAction
- alarms
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
- 分类
- homepage_url 开发者或者插件主页
- 5种类型的JS对比及消息通信
- 其它补充
- 谷歌浏览器截屏
- 框架及工具
- 前端UI设计网站
- 网页中使用Unicode字符