字体 · 前端

## **字体属性简写 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 small-caps 让字母以小型方式显示大写 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 small-caps 让字母以小型方式显示大写（即大写字母和小写字母一样大） 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;/*上面自定义的字体名或者系统自带的字体名*/ } ~~~ font-style ``` <div> abc123 abc123 abc123 abc123 </div> ``` 效果： <div> ccc ccc ccc ccc </div> font-variant 所谓“小型大写”就是，即与小写字母一样高，外形与大写字母保持一致 ``` AAAaaa AAAaaa ``` 效果： <div> AAAaaa AAAaaa </div> font-weight ``` l l l l l l l l l l l l l ``` 效果： <div> l l l l l l l l l l l l l </div> font-size line-height font-family 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; ```