返回
Featured image of post CSS基礎複習-文字篇

CSS基礎複習-文字篇

CSS文字樣式,該怎麼和 HTML搭配

font-family - 字體

p {
    font-family:  Arial, Helvetica, sans-serif;
    /* 會用這種方式,依序尋找有沒有的字體,注意網站使用的文字必須是可以商用的字體! */
}

font-style - 字體樣式

p {
    font-style: normal;
    /* italic 斜體字 */
}

font-weight - 字重

p {
    font-weight: normal;
    /* bold 粗體字 */
}

font-size - 字大小

p {
    font-size: 16px;
    /* 字體大小 */
}

line-height - 行高

p {
    line-height: 1.5;
    /* 設定行高,比較少用通常都用預設高度 */
}

text-shadow - 字陰影

p {
    text-shadow: 2px 2px;
    /* x y 軸 */
}

letter-spacing - 字距

p {
  letter-spacing: -2px;
  /* 字母和字母 左右的距離 */
}

text-decoration - 底線

a {
    text-decoration: none;
    /* 預設的超連結都會有底線 */
}

color - 字色

p {
    color: #666666;
}

font-face - 安裝字體

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

p {
  font-family: myFirstFont;
}
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus