2014年9月17日星期三

簡單、快速:3秒調出漂亮文字布局


簡單、快速:3秒調出漂亮文字布局

文字在螢幕上呈現的耐不耐看,是決定了網路文本要不要被閱讀下去的重要因素。一篇好的數位文本,肯定在文字的呈 現 上下足了功夫。 這不是「字型」的原因而已,因為更重要的是字的大小、行寬、粗細, 這三點值得你一再去調整、調校。


一、文字範本的CSS
<style type="text/css">
.title01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.38em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding-left: 2em;
letter-spacing: 0.1em;
background-image: url(https://lh5.googleusercontent.com/-DOigud2kQVs/U7OZ90USuEI/AAAAAAAATjc/PushP-fiJWM/w23-h28-no/blogstars20140702-1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 23px;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

.tableword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding: 3px;
}

.column01 {
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px outset darkred;
}
</style>
二、快速套用文字布局影音 教學

  1. 請把範例之CSS複製到<body>之後。
  2. 再依影音教學操作。