CSS 字体属性(font)-KeepStudy

CSS 字体属性(font)

| 属性 | 说明 | CSS |
|-----|-----|-----|
| font | 在一个声明中设置所有字体属性 | 1 |
| font-family | 规定文本的字体系列 | 1 |
| font-size | 规定文本的字体尺寸 | 1 |
| font-style | 规定文本的字体样式 | 1 |
| font-variant | 规定文本的字体样式 | 1 |
| font-weight | 规定字体的粗细 | 1 |
| @font-face | 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 | 3 |
| font-size-adjust | 为元素规定 aspect 值 | 3 |
| font-stretch | 收缩或拉伸当前的字体系列 | 3 |

## font 属性
- 可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
- font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
- 属性值
    - font-style：规定字体样式。
    - font-variant：规定字体异体。
    - font-weight：规定字体粗细。
    - font-size/line-height：规定字体尺寸和行高。
    - font-family：规定字体系列。参阅：font-family 中可能的值。
    - caption：定义被标题控件（比如按钮、下拉列表等）使用的字体。
    - icon：定义被图标标记使用的字体。
    - menu：定义被下拉列表使用的字体。
    - message-box：定义被对话框使用的字体。
    - small-caption：caption 字体的小型版本。
    - status-bar：定义被窗口状态栏使用的字体。
- 实例
```css
p.ex1{
    font:15px arial,sans-serif;
} 
p.ex2{
    font:italic bold 12px/30px Georgia, serif;
}
```
- JavaScript 语法：	object.style.font="italic small-caps bold 12px arial,sans-serif"

## font-family 属性
- JavaScript 语法：	object.style.fontFamily="arial,sans-serif" 
- 属性值
    - family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
    - generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

##  font-size 属性
- JavaScript 语法：	object.style.fontSize="larger"
- 属性值

```css
/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* <relative-size>，相对大小值 */
font-size: larger; #把 font-size 设置为比父元素更大的尺寸。
font-size: smaller; #把 font-size 设置为比父元素更小的尺寸。
 
/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;
 
/* <percentage>，百分比值 */
font-size: 80%; #把 font-size 设置为基于父元素的一个百分比值。
 
font-size: inherit;
```

## font-variant 属性
- JavaScript 语法：object.style.fontVariant="small-caps"
- 属性值
    - normal：默认值。浏览器会显示一个标准的字体。
    - small-caps：浏览器会显示小型大写字母的字体。
    - inherit：规定应该从父元素继承 font-variant 属性的值。

## font-weight 属性
- JavaScript 语法：	object.style.fontWeight="900"
- 属性值
    - normal：默认值。定义标准的字符。
    - bold：定义粗体字符。
    - bolder：定义更粗的字符。
    - lighter：定义更细的字符。
    - 100,200,300,400,500,600,700,800,900：定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
    - inherit：规定应该从父元素继承字体的粗细。

## font-size-adjust属性
- 当一个字体不可用，浏览器使用第二个指定的字体。这可能会导致改变字体大小。为了防止这种情况，使用的font-size-adjust属性。
- JavaScript 语法：	object.style.fontSizeAdjust="0.58"
- 属性值
    - number：定义字体的 aspect 值比率。 可使用的公式： 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸 举例： 如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。
    - none：默认。如果此字体不可用，则不保持此字体的 x-height。
    - inherit：继承父元素的字体大小调整属性。

## font-stretch 属性
- JavaScript 语法：	object.style.fontStretch="expanded"
- 属性值
    - wider：使得文本更宽
    - narrower：使得文本窄
    - ultra-condensed：使文本窄得不能再窄
    - extra-condensed：指定紧缩程度第二大的字体
    - condensed：指定略微紧缩程度第二大的字体
    - semi-condensed:指定略微紧缩的字体
    - normal:指明字体既不紧缩也不加宽
    - semi-expanded:指定略微加宽的字体
    - expanded：指定加宽的字体
    - extra-expanded：指定加宽程度第二大的字体
    - ultra-expanded：指定加宽程度最大的字体
    - inherit：指定该属性与元素父项的属性采用相同的计算值

## @font-face 规则
- 属性值
    - font-family：必需的。定义字体的名称。
    - src：必需的。定义该字体下载的网址（S）
    - font-stretch：可选。定义该字体应该如何被拉长。默认值是"正常"
    - font-style：可选。定义该字体应该是怎样样式。默认值是"正常"
    - font-weight：可选。定义字体的粗细。默认值是"正常"
    - unicode-range：可选。定义该字体支持Unicode字符的范围。

- 字体的名称，font - face规则：
font-family: myFirstFont;

- 字体文件包含在您的服务器上的某个地方，参考CSS：
src: url('Sansation_Light.ttf')

- 如果字体文件是在不同的位置，请使用完整的URL：
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

```css
##指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}
```

顶部

CSS属性

目录

相关推荐