1 / 9

CSS 字型樣式

CSS 字型樣式. Fonts. font-family h1 {font-family: "Times New Roman", sans-serif;} font-size p {font-size: 2.5em;} font-weight .vip {font-weight: bolder;} font-style .var {font-style: italic} font-variant #subtitle {font-variant: small-caps;} font

ebony-haley
Download Presentation

CSS 字型樣式

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CSS字型樣式

  2. Fonts • font-family h1 {font-family: "Times New Roman", sans-serif;} • font-size p {font-size: 2.5em;} • font-weight .vip {font-weight: bolder;} • font-style .var {font-style: italic} • font-variant #subtitle {font-variant: small-caps;} • font p {font: italic bold 28px/36px "Times New Roman", serif;}

  3. font-family • 屬性值: 一或多個字型名稱 • 若多個字型名稱,以逗號分隔 • 字型名稱若內含空白,以引號括住 • font-family 最後加上通用字型 • h1 {font-family: "Lucida Calligraphy", Verdana, serif;} • h2, h3 {font-family: sans-serif;} • p#asp {font-family: "Monotype Corsiva", Arial;} • p {font-family: "Bauhaus 93";}

  4. 通用字型(Generic font families) http://www.w3.org/Style/Examples/007/fonts serif vs sans serif: http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

  5. 字型大小(font-size) • 屬性值: xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger length %

  6. 字型粗細(font-weight) • bold (厚)、bolder (更厚)、及 normal (正常) • 設定數值可以從 100(最細) 到 900 (最粗的) <span style="font-weight: bold">bold</span> <span style="font-weight: 900">900</span> = bold = normal

  7. 字型格式(font-style) • 用來設定字體是否為斜體字 (italic 或 oblique) <span style="font-style: normal">normal</span> <span style="font-style: italic">italic</span> <span style="font-style: oblique">oblique</span>

  8. 字型變形(font-variant) <span style="font-variant: small-caps">initial in small caps</span> AND LATER IN LARGE CAPS.

  9. font • font:font-stylefont-variantfont-weightfont-size/line-heightfont-family; h1 {font: 1.75em sans-serif;} h2 {font: 28px serif;} h3 {font: bold 1.75em sans-serif;} h4 {font: oblique bold small-caps 1.75em Verdana, sans-serif;} p {font: italic 28px/32px Georgia, Times, serif;}

More Related