04.CSS行内盒模型及文字样式详解_font-face style行内样式写法-CSDN博客

本文链接：https://blog.csdn.net/qq_46055080/article/details/104268083

04.CSS行内盒模型及文字样式详解

文章目录

04.CSS行内盒模型及文字样式详解

<1>定义

行内盒模型（inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则。

<2>行内盒模型的概念分析

行内盒模型

🎈内容区

由font-size（文字大小样式）决定大小。

🎈文本基线（baseline）、中线middle、顶线top、底线bottom

文本基线的位置由该字体中的X的小写字母的底线决定。css中的单位1ex = 该文字中小写字母x的高度。

🎈行间距与行高（line-height）

行间距指的是上下两行文字内容区之间的间距。
行高指的是上下两行文字的文本基线之间的最小间距。
行高与文字区高度之差就是行间距。（line-height - fontsize）

line-height取值分两类
①：px，直接定义固定值。
②：倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高
的值就为16*1.5=24px。

<3>复杂的行内盒模型

🎈替换元素对文本框高度的影响

非替换元素是指内容可以直接在代码中写出来（如文字）。
替换元素是指内容存储在代码文件之外，需要通过文件路径引入（如图片，视频，音频等）。

图片默认情况下行内盒模型的基线对齐，此时可以使用 vertical-align来调整垂直对齐方式。例如： vertical-align: bottom;（垂直对齐不影响块级元素中内容的对齐）。
替换元素对文本框高度的影响

🎈单行不同文字大小、行高对行内盒模型的影响

单行不同文字大小、行高对行内盒模型的影响
解决方案：

1：先确定最高的行内盒模型，并算出该行内盒模型的文本基线位置，接着将其他行内盒模型的基线与之对齐。
2：行框的最终高度，由行内最高的那个行内盒模型决定。

<4>文字样式

🎈font-size

规定字体大小。

文字大小的值常用有两类：
① px
② em（例：1.5em、2em，含义为该文字的大小是父元素文字大小的1.5倍，2倍）

🎈font-family

规定字体系列。

（1）使用用户操作系统自带的字体来显示网页内容

例：

font-family:Tahoma,Helvetica,Arial,sans-serif;

表示的意思是：

1:在用户的操作系统中匹配Tahoma（大河马）字体，如果系统中有该字体，则使用该字体显示内容。

2:如果系统无Tahoma字体，则在用户的操作系统中匹配Helvetica字体，如果系统中有该字体，则使用该字体显示内容。

3:如果系统无Helvetica（赫维提卡体）字体，则在用户的操作系统中匹配Arial字体，如果系统中有该字体，则使用该字体显示内容。

4:如果系统无Arial字体，则在用户的操作系统中的sans-serif（非衬线字体，操作系统自带很多非衬线的字体）中匹配一个，然后使用该字体显示文字。

网络安全字体：只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些可以应用所有操作系统的字体，被称为网页安全字体。

字体名称	字体类型	注意
Arial	sans-serif	通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier New	monospace	某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。该类字体常用于代码的显示
Hiragino Sans GB	sans-serif	冬青黑体，为苹果系统的默认字体，有较好的中文显示效果
Times New Roman	sans-serif	某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
SimSun	serif	宋体，中文环境下常用的显示字体，在字体样式代码中可以写字体的汉字名称，但是为了最好的兼容性，建议用字体的英文名字

常见汉字字体的英文名称：

中文	英文
黑体	simhei
宋体	simsum
新宋体	NSimSum
仿宋	FangSong
楷体	KaiTI
华文黑体	STHeiti
华文楷体	STKaiti
隶书	LiSu
幼圆	YouYuan

目前的字体设计领域，字体大致分为两大类
1：Serif（有衬线），多用于网页正文，内容等大量文字内容区域。
2：Sans Serif（无衬线），多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域。
字体衬线
（2）使用程序员自定义的字体来显示网页内容

 <style>
        @font-face {
            font-family: "Chonger";
            src: url(Chonger.ttf);
        }
        span {
            /* font-family: Tahoma, "宋体", SansSerif; */
            font-family: Chonger;
        }
    </style>
</head>
<body>
    <span>自定义字体</span>
</body>

🎈font-style

规定字体样式。

值	描述
normal	默认值。浏览器会显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定从父元素继承字体样式

🎈font-weight

设置文本粗细。

值	描述
normal	默认值。定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
数值	400等同于normal。700等同于bold