当前位置：网站首页 > 创业 > 正文

CSS文本长度单位的总结与实例分析

张子豪 2025-10-12 11:31 2

网页中对于文字的润色供给了良多撑持，我们可以做到网页中像word一样来显示文字。今天我就来分享下在HTML加上CSS中供给的文字长度单元，固然有的用不到可是也给我供给了一个方式和撑持。

东西/原料

CSS根本常识
HTML根本常识

方式/步调

1
文字长度单元in（英寸）：一般英国利用的长度单元，1英寸约等于2.51厘米。这里我在浏览器中显示1in的文字结果。具体代码：
<html>
<head>
<title>文字的长度</title>
</head>
<body>
这里是文字长度的测试
</body>
</html>
2
文字的长度单元cm（公分）：公分也叫厘米。这里我为了和上面的例子做比力也用2.54厘米来申明问题，具体代码如下：
<html>
<head>
<title>文字的长度</title>
</head>
<body>
这里是文字长度的测试
这里是文字长度的测试
</body>
</html>
经由过程比力可以看到执行成果完全一样。
3
文字的长度单元mm：这个就是长度单元来暗示文字的巨细的一个方式。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
这里是文字长度的测试
这里是文字长度的测试
</body>
</html>
经由过程10mm和1cm比力可以反映出执行成果的问题。
4
文字的长度单元ex：以小写字母的高度为单元来显示的，这个此刻良多都不撑持了，利用的也很少。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
HtmL

</body>
</html>
5
文字的长度单元em：这个是以字体的高度为单元的一种暗示方式，其实就是百分比来显示的。em在CSS中，1em等于100％，是一个比率，连系CSS担当关系利用，具有矫捷性。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
HtmL

</body>
</html>
6
文字的长度单元pt：在电脑显示器中是一个尺度的长度单元，1pt等于1/72英寸，这个单元经常用于印刷业，很是简单易用的一个单元。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
HtmL
HtmL
</body>
</html>
经由过程72in个1pt的比力来阐述这个单元，可以直不雅的反映出他的巨细的。
7
文字的长度单元px：像素,屏幕上显示的最小单元，这个经常用于网页设计中很是直不雅而且便利；示例代码如下
<html>
<head>
<title>文字的长度</title>
</head>
<body>
HtmL
</body>
</html>
经由过程以上的例子我们进修了文字长度的单元，经由过程分歧单元来描述文字巨细需要按照分歧的界说来设置其值。