CSS学习之字体属性系列

font-family

1. font-family
    应用于：所有元素
    继承性：有
    初始值：用户代理(浏览器)指定的值
    可包含的值：
        字体名系列：
            serif
            sans-serif
            monospace
            cursive
            fantasy
            
        字体名：
            1. 对于中文：
                宋体   ---> 对应的英文 SimSun
                仿宋  ---> FangSong
                新宋体  ---> NSimSun
                黑体  ---> SimHei
                微软雅黑  ---> Microsoft YaHei
                微软正黑  ---> Microsoft JhengHei
                楷体  ---> KaiTi
            PS: 对应的英文名能够识别中文和英文，而中文只能识别中文
            
            2. 对于英文：
                Arial
                Times New Roman
                
        注意事项：
            1. 英文的放前面，中文的放后面
            2. 除了指定特定的字体名外，还应该包括一个通用的字体系列
            3. 如果字体名含有特殊字符或者是中文名，最好用引号包含起来(双单都可)
            4. 通用字体系列不要用引号括起来，要不然则表示需要这个特定的字体名
            5. 如果是单个字体名并且不和font系列关键字冲突的话，是可以不用加引号的
            
        实例：
            font-family: Arial, "Times New Roman", SimSun, "微软雅黑", serif;
        

font-size

2. font-size:
    应用于：所有元素
    继承性：有
    初始值：medium
    可包含的值：
        xx-small
        x-small
        small
        smaller
        medium
        larger
        large
        x-large
        xx-large
        16px  ---> 一般12px或者16px
        120%  --> 根据父元素的字体大小的计算值计算
    注意：
        1. medium具体多少跟浏览器有关，也与缩放因子有关
        2. 子元素继承的是计算值，而不是声明值
        3. font-size定义的是em框的大小，也就是文字内容区的大小

font-weight

3. font-weight:
    应用于：所有元素
    继承性：有
    初始值：normal
    可包含的值：
        lighter
        normal
        bold
        bolder
        100
        200
        300
        400  ---> normal
        500
        600
        700  ---> bold
        800
        900

font-sytle

4. font-style:
    应用于：所有元素
    继承性：有
    初始值：normal
    包含的值：
        normal
        italic  斜体
        oblique  倾斜

font-variant

5. font-variant:
    应用于：所有元素
    继承性：有
    初始值：normal
    包含的值：
        normal
        small-caps  小型大写字母
                    如果是大写字母，则更大一点；
                    如果是小写字母，则转成大写字母并且比正常的大写字母稍微小一点

font

6. font:
    应用于：所有元素
    继承性：有
    初始值：根据单个属性决定
    写法：
        font: style weight variant size/line-height family;
            1. 前三个顺序无所谓
            2. font属性中size和famliy必须要有，其他无所谓
            3. 当然，其他属性不写，则为默认值，记住

CSS3 字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于@font-face 规则描述。

您"自己的"的字体是在 CSS3@font-face规则中定义的。

例如

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

再例如：
使用粗体文本

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

CSS3 字体描述
来源于菜鸟教程 https://www.runoob.com/css3/css3-fonts.html

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

Web安全字体组合

引用源菜鸟教程 https://www.runoob.com/cssref/css-websafe-fonts.html

font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。

你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:

p{font-family:"Times New Roman", Times, serif}

---

通用的字体系列

Serif 字体

字体	文本示例
Georgia, serif	This is a heading This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading This is a paragraph
"Times New Roman", Times, serif	This is a heading This is a paragraph

sans-serif 字体

字体	文本示例
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Monospace 字体

字体	文本示例
"Courier New", Courier, monospace	This is a heading This is a paragraph
"Lucida Console", Monaco, monospace	This is a heading This is a paragraph