CSS 的文字魔術

CSS的文字布局

---

Regardless of the theme, websites are a medium for providing information to an audience. Although a few websites are purely image-based, most websites rely heavily on text to communicate with the audience.
Vest, J., Crowson, W. & Pochran, S. (2005). Web design. p. 51. New York: Thomson.

---

Div + CSS + 文字布局
教學影音video

字型

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字型語法的運用範例。<br>
</div>

font-family: 字型;
font-family: 微軟正黑體;
font-family: 新細明體;
font-family: 標楷體;

這是中文字的文字布局 CSS 字型語法的運用範例。

大小

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的大小語法運用範例。<br>
</div>

font-size: 字的大小;
font-size: 1.6em;
font-size: 95%;
font-size: 17px;

這是中文字的文字布局 CSS 字的大小語法運用範例。

粗細

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的粗細語法運用範例。<br>
</div>

font-weight: 字的粗細;
font-weight: normal;
font-weight: bold;
font-weight: bolder;

這是中文字的文字布局 CSS 字的粗細語法運用範例。

行距

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 行距的語法運用範例。<br>
</div>

line-height: 行距的高;
line-height: 0.9em;
line-height: 2em;
line-height: 20px;

這是中文字的文字布局 CSS 行距的語法運用範例。

字間距

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字間距的語法運用範例。<br>
</div>

letter-spacing: 字與字的距離;
letter-spacing: 0.3em;
letter-spacing: 1em;
letter-spacing: -3px;

這是中文字的文字布局 CSS 字間距的語法運用範例。

非常重要的補充：CSS的三種使用方式。

影音教學內容：
<style>
.word031001 {
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
}

.word031002 {
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

#i031001 {
border: 1px solid red;
background-color: lightgreen;
}
</style>

---