扩展参考线-深入理解字体

阳光穿透心脏的1/2处 2022-11-25 11:47 120阅读 0赞

### 文章目录 ###

*  参考线-深入理解字体
 *   *  文字
     *  font-size
     *  行高
     *  vertical-align
     *  可替换元素和行块盒的基线

# 参考线-深入理解字体 #

font-size、line-height、vertical-align、font-family

## 文字 ##

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有几根参考线,不同的文字类型，参考线不一样。同一种文字类型，参考线一致。

## font-size ##

字体大小，设置的是文字的相对大小

文字的相对大小：1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）

行盒的背景，覆盖content-area

## 行高 ##

顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做gap（空隙）

gap默认情况下，是字体设计者决定

top到bottom，叫做virtual-area（虚拟区）

行高，就是virtual-area

line-height：normal，默认值，使用文字默认的gap

> 文字一定出现一行的最中间——是错误的  
> content-area一定出现在virtual-area的中间

## vertical-align ##

决定参考线：font-size、font-family、line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

baseline：该元素的基准线与父元素的基准线对齐

super：该元素的基线与父元素的上基线对齐

sub：该元素的基线与父元素的下基线对齐

text-top：该元素的virtual-area的顶边，对齐父元素的text-top

text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom

top：该元素的virtual-area的顶边，对齐line-box的顶边

bottom：该元素的virtual-area的底边，对齐line-box的底边

middle: 该元素的中线(content-area的一半)，与父元素的X字母高度一边的位置对齐。

行盒组合起来，可以形成多边，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。

实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。

行盒：inline-box

行框：line-box

数值：相对于基线的偏移量，向上为正数，向下为负数

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

line-box是承载文字内容的必要条件，以下情况不生成行框：

1.  某元素内部没有任何行盒
2.  某元素字体大小为0

## 可替换元素和行块盒的基线 ##

图片：基线位置位于图片的下外边距。

表单元素：基线位置在内容底边

行块盒：

1.  行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
2.  如果行块盒内部没有行盒，则使用下外边距作为基线。

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS字体大小设置参考

乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力，他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。 font-s

深藏阁楼爱情的钟/ 2023年10月16日 20:35/ 0 赞/ 99 阅读

相关深入理解Java线程

进程和线程进程进程是操作系统资源分配的最小单位问题: 进程之间是如何通信的，有哪些方式 1. 管道以及有名管道 2. 信号 3. 信号量

太过爱你忘了你带给我的痛/ 2023年09月29日 15:52/ 0 赞/ 35 阅读

相关参考文献字体 latex_字体参考| HTML

参考文献字体 latex Fonts are basically platformed dependent or in simple words, we can say t

谁借莪１个温暖的怀抱￠/ 2023年03月05日 09:56/ 0 赞/ 62 阅读

相关深入理解扩展运算符实现原理

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群 ... 作用扩展运算符（spread）是三个点（...），用于取出参数对象中的所有可遍历属性，浅

矫情吗；*/ 2023年01月20日 08:18/ 0 赞/ 177 阅读

相关深入理解线程池--ThreadPoolExcutor

线程池技术在并发时经常会使用到，java中的线程池的使用是通过调用ThreadPoolExecutor来实现的。ThreadPoolExecutor提供了四个构造

红太狼/ 2022年12月10日 10:19/ 0 赞/ 317 阅读

相关 css系统自带字体_CSS系统字体堆栈参考

css系统自带字体 Fonts on a website can easily become a large part of the total bundle size th

女爷i/ 2022年11月27日 05:20/ 0 赞/ 322 阅读

相关扩展参考线-深入理解字体

文章目录参考线-深入理解字体文字 font-size 行高 vertical-align 可

阳光穿透心脏的1/2处/ 2022年11月25日 11:47/ 0 赞/ 121 阅读

相关深入理解php内核编写扩展_III- 资源

Part III: Resources 原文：http://devzone.zend.com/article/1024-Extension-Writing-Part-

谁借莪１个温暖的怀抱￠/ 2022年06月13日 04:20/ 0 赞/ 175 阅读

相关《深入理解ES6》——扩展对象的功能性

对象字面量语法扩展对象字面量之所以如此流行，是因为如果我们想要创建对象，不再需要编写冗余的代码，直接通过它简洁的语法就可以实现。而在ES6中，以下语法让对象字面

川长思鸟来/ 2022年05月09日 01:04/ 0 赞/ 203 阅读

相关 posgresql auto_explain 扩展参考

auto\_explain可以定义sql执行的时间以记录在postgres中日志中，包含sql的直接计划，在线上优化时可以说是一个非常好用的工具，另外结合pg\_s

旧城等待，/ 2022年01月16日 11:41/ 0 赞/ 158 阅读