CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨

hedge_hog 发布于2019-04-23 13:16 / 766人阅读

摘要：卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。文字，咋排就是这么简单的页面。后的空格，后加上字距蓝色，再加上单词间距粉红色块才是真正的距离。

先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
            }

<div>文字，咋,排-hello Spacingdiv>

就是这么简单的页面。显示结果如下

汉字占的地方是绿色部分是宽14px，高14px

英文字符占的地方黄色部分是宽 7px，高14px

1.font-size:14px,默认行高会上下加1px,达到16px
2.汉字字高14px,字宽14px（宋体设计的是13+1模式）,字字紧相邻
3.英文字符（空格看成一个英文字符，hello后面那个）,宽7px

开始变动css，加字距

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
            }

4.letter-spacing的意思是字与字之间的间距，也就是出现在上图中的蓝色方块，这里设置宽10px

5.可以理解为默认letter-spacing:0px

6.应该把空格当成一个英文字符看，他也有自己的letter-spacing

7.中文标点符号等同于汉字，英文状态下标点符号等同于英文字符

再变动css，加词距

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
                /* 添加词距 */
                word-spacing: 20px;
            }

8.word-spacing，单词间距，浏览器是根据空格判断的，有空格就认为有词。

9.hello后的空格，后加上字距letter-spacing(蓝色)，再加上单词间距（粉红色块20）才是真正的距离。

最后变一次CSS，加上首行缩进

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
                /* 添加词距 */
                word-spacing: 20px;
                /* 添加首行缩进 */
                text-indent: 2em;
            }

10.这里1em为14px,2em为28px,text-indent首行缩进，所以，文的前面为28px

11.这里可以看出，字距加在字后面，单词间的词距加在字距后，字距词距默认皆为0！

最后附上html文件代码

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style>
 7             div{
 8                 /*width: 100px;*/
 9                 border: 1px solid black;
10                 color: red;
11                 font-size: 14px;
12                 
13                 text-decoration: none;
14                 letter-spacing: 10px;
15                 word-spacing:20px;
16                 text-indent: 2em;
17             }
18         style>
19     head>
20     <body>
21         <div>文字，咋,排-hello Spacingdiv>
22     body>
23 html>

云服务器 GPU云服务器 textview首行缩进首行缩进html5 上传数据的相关问题中文排版CSS心得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1646.html

003-CSS核心属性

摘要：文本大小说明属性值为数值型时，必须给属性值加单位，属性值为时除外。字间距控制英文字母或汉字的字距。列表元素可继承。文本大小 {font-size:12px/14px/16px} 说明： 1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。 2）单位还可以是pt，9pt=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器...

lijinke666 2019-08-02 12:00 评论0 收藏0
003-CSS核心属性

摘要：文本大小说明属性值为数值型时，必须给属性值加单位，属性值为时除外。字间距控制英文字母或汉字的字距。列表元素可继承。文本大小 {font-size:12px/14px/16px} 说明： 1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。 2）单位还可以是pt，9pt=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器...

liangdas 2019-08-29 17:15 评论0 收藏0
HTML和CSS前端教程03-CSS文本样式

摘要：目录颜色建议就用十六进制长度的度量单位建议就用文本样式字体属性文本样式颜色建议就用十六进制颜色建议就用十六进制长度的度量单位建议就用长度的度量单位建议就用文本样式文本样式字体的大小，样式以及方位字体属性字体属性属性名说明例子目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本...

bitkylin 2019-04-23 11:52 评论0 收藏0
前端代码编写规范

摘要：前端代码规范代码编写规范缩进每一层级由个空格组成，避免使用制表符进行缩进。单目运算符的操作数之间不应该用空白隔开语句中的表达式之间应当用空格隔开代码编写规范头部文档类型建议使用格式的。内联元素写在一行内，块状元素还有列表和表格要另起一行。前端代码规范 JavaScript代码编写规范缩进每一层级由4个空格组成，避免使用制表符（Tab）进行缩进。行的长度每行长度不应该超过80个...

liangdas 2019-08-23 11:49 评论0 收藏0