HTML中文字相關知識
阿新 • • 發佈：2018-12-11
文字樣式
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style> div{ font-weight:bold; font-style:italic; font-size:50px;/*預設是16px*/ font-family:arial,"微軟雅黑";/*有英文字型，的兩邊，左邊是英文，右邊是中文*/ /*font-family:"微軟雅黑";*/ /*字型必須是電腦中有的*/ } </style> </head> <body> <!-- font-weight 文字加粗 weight 加粗 normal 正常 font-style 文字傾斜 italic 傾斜 normal 正常 font-size 文字大小 50px 數字加單位 font-family 文字字型 “主要字型”，“備選字型1”，“備選字型2” 表示如果電腦上有“主要字型”，就顯示主要字型 如果使用者電腦上沒有主要字型，那就顯示“備選字型1”，如果使用者電腦上沒有備選字型1，就顯示“備選字型2”； 英文字型，“中文字型”； 英文字型，使用英文字型，中文字型，使用“中文字型”； 英文字型沒有“”，一般情況下不要設定一些特殊的字型 --> <div>歡迎大家來到海棠Lloyd</div> </body> </html>
行高
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style> div{ border:1px solid red; /*height:30px;給了30px給文字，是文字加上空白一共30px line-height:30px; height:21px; line-height:21px;*/ font:bold italic 26px/50px "微軟雅黑";/*bold italic 可以刪掉，但是其他的一定不能調換*/ } </style> </head> <body> <!-- 行高代表一行文字在容器之中所佔的高度 line-height 行高 16px 值是數字加單位 如果行高的值與容器的高度相等，那麼文字就會垂直居中 測量多行文字行高的方法 1、首先要知道文字的大小，使用ps測量截圖的文字的大小 2、量一下兩行文字之間的距離，也是使用ps去量，如果是13，因為不能使用奇數，因此要麼少了一畫素要麼多了一畫素 3、拿上面量出來的距離除2 如果行高為奇數的話，在自己測試之後會發現上面比下面少一個畫素，上邊距比下邊距少一個畫素 12 13/2=7.5 6 7，所以若是行高為13px，則上面距離是6px，下面的距離將是7px --> <!-- font：font-weight font-style font-size（必須）/line-height font-family（必須） --> <div>歡迎光臨</div> </body> </html>
文字修飾等
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <!-- 文字 color 顏色 text-algin 文字的對齊方式 text-indent 首行縮排（em縮排字元） text-decoration 文字修飾，給文字添上下劃線中劃線等等 letter-spacing 字母的間距 word-spcing 單詞間距（以空格解析） white-space 強制不換行 --> </body> </html>
文字設定1
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
color:red;
text-align: left;
width:100px;
border:1px solid black;
text-indent:32px;
font-size:12px;
}
</style>
</head>
<body>
<!--
color表示顏色，color：red；
值為顏色的幾種表示方法
text-algin 表示文字的對其方式
left 代表左對齊（預設）
center 居中對其
right 右對其
text-indent 首行縮排
32px 值是數字加上單位
-->
<div>
huanyigndajia
</div>
</body>
</html>
文字設定2
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{
color:red;
text-align: left;
width:100px;
border:1px solid #000;
text-indent:2em;
font-size:20px;
text-decoration: underline;
letter-spacing:10px;
}
</style>
</head>
<body>
<!--
color表示顏色，color：red；
值為顏色的幾種表示方法
text-algin 表示文字的對其方式
left 代表左對齊（預設）
center 居中對其
right 右對其
text-indent 首行縮排
32px 值是數字加上單位
text-decoration 文字修飾
underline 下劃線
overline 上劃線
line-through 中劃線
none 沒有下劃線
letter-spacing 字母間距
10px 值為數字加單位
word-spacing 單詞間距
-->
<div>
huanyigndajiad
</div>
</body>
</html>