如何用css設定網頁字型

來源:互聯網
上載者:User
css|網頁   在網頁介面的設計過程中,許多人考慮最多的是用什麼圖形與色彩來裝飾網頁,或是在網頁上加上什麼動畫特效;而對於網頁的字型卻不太重視。結果往往是有些網站的字型不是太小就是太大,嚴重影響閱覽;而有的網站整頁用的都是標準字型,毫無個性而言。其實,字型作為網站內容的載體,有其獨特的重要性,是不應該忽視的。

  運用Html,我們可以對字型的大小及字形進行簡單的修改,但要進行統一地控制、建立特殊效果,就必須要用到css.它能讓您更有效地控制網頁外觀,並可以擴充精確指定網頁元素位置,外觀以及建立特殊效果的能力。考慮到用frontpage製作網頁的人較多,同時它對其他網頁編輯器的使用者也有一定的借鑒作用,

  因此,我就講解一下如何在frontpage2000中運用css設定網頁字型。

   我們可以用css設定出無數種網頁字型,但萬變不離其宗,任何的變化都要遵循css的基本文法。因此我們先來瞭解一下css的基本文法,它是這樣子的:HTML 標誌 { 標誌屬性:屬性值;標誌屬性:屬性值;標誌屬性:屬性值;…… }。設定字型時,只要正確的更改字型屬性的屬性值,就可以達到目的。字型屬性共分五種:字族(font-family)、字型風格(font-style)、字型變形(font-variant)、字型加粗(font-weight)、字型大小(font-size),此外font屬性是一個總體屬性,可一一指定以上各種屬性和屬性值。它們的功能與屬性值如下:

  1、字族(font-family)  
  功能:通過font-family指定字型類型用於改變HTML標誌或元素的字型,你可設定一個可用字型清單。瀏覽器由前向後選用字型。

  其文法為:h1 {font-family: 字型類型,字型類型,字型類型}

  2、字型風格(font-style)
  功能:使文本顯示為扁斜體或斜體等?屬性值:normal-普通、italic-斜體、oblique-偏斜體

  文法為:h1{font-style:屬性值}

  3、字型變形(font-variant)
  功能:使文本中的小寫字母顯示為字型較小的大寫字母,常用於設計特殊的標題。

  屬性值:normal(普通)和small-caps(小型大寫字母)

  文法為:h1{font-variant:屬性值}

  4、字型加粗(font-weight)
  功能:用於設定字型筆劃的粗細。

  屬性值:正常度 - normal

  相對度 - bold, bolder, light, lighter

  漸層度 - 100, 200, 300, 400(相當於normal), 500, 600, 700(相當於 bold、 lighter、 bolder、以及數值100-900。

  文法為:h1 < font-weight: 屬性值> 

  5、字型大小(font-size)
  功能:改變字型大小。

  屬性值:長度 - 用毫米(mm),厘米(cm),英寸(in),磅(pt),象素(px),pica(pc),ex(小寫字母x的高度)或em(字型高度)作為度量單位。

  百分比 - 相對於其父元素字型大小的百分比。絕對尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種,它們以各種字型的medium尺寸成比例縮放,每一級1.5倍。相對尺寸:有larger和smaller兩種,根據字型原來的大小來決定縮放以後的大小。百分比:把字型設定成原來尺寸的百分比值,可以任意指定數值。

  文法為:{font-size:屬性值}

  6、字型(font)
  功能:簡寫屬性,提供了對字型所有屬性進行設定的快捷方法。

  屬性值:字型屬性值為前面已列出的值,,內容的順序為:font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分屬性,屬性值間用空格分開。

  文法:{font:屬性值1 屬性值2 ...屬性值n}

  下面我就給大家舉一個例子:把“網路化”這三個字設定為加粗的字型首先在頁面打入“網路化”這三個字,由於字型的粗細是由“字型加粗”這個屬性決定的,所以在進入html編輯模式找到這些字後,就在它們的前後分別加上“字型加粗”及其屬性值的代碼,如:<span style="font-weight: 700">網路化</span>

  
完成以上步驟後,“網路化”這三個字就由普通字型變為加粗的字型。如果要修改為其他的字型,只要更換代碼中的字型屬性以及屬性值即可。

  我曾在上面提到font屬性是一個總體屬性,並可以快捷地設定字型的所有屬性。以下這個例子就是給大家講解如何給文字定義多種屬性。我依然以“網路化”這三個字作為設定對象,只是這次將它改為16磅的偏斜字型。設定的步驟與上面相似,但代碼要改為:<span style="font: oblique 16pt ">網路化</span>

  
完成後,這三個字就同時具有了兩種屬性。比較以下兩副圖就可以看出修改前後的不同。

  

  在這裡還需要說明的是雖然frontpage2000也可以更改字型的大小與字形,但它卻不能像css這樣精確地控制字型,如frontpage2000就不能將字型大小設定為16磅。如果將以上的代碼直接copy入html編輯頁面中,就會使<>""這幾個符號變為奇怪的字元,所以在應用中還是直接鍵入為好。

  以上介紹的是如何在頁面中對某些文字的字型進行設定,但如果要對整個或幾個頁面的字型進行設定就要運用到以下的方法:

  一、當只是要定義當前網頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種階層式樣式表,“嵌”在網頁的 <HEAD> 標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。

  二、當要在網站上所有或部份的網頁上一致地應用相同樣式時,可使用外部樣式表。在一個或多個外部樣式表中定義樣式,並將它們連結到所有網頁,便能確保所有網頁外觀的一致性。如果您決定更改樣式,您只需在外部樣式表中作一次更改 ,則該更改就會反映到所有與該樣式表相連結的網頁上。通常外部樣式表以 .css 做為副檔名,例如 1.css。

  下面就以如何把網頁的所有文字設為流行的9磅字為例,給大家講解如何運用以上兩種方法。

  如果只設定當前頁面,就要運用嵌入的樣式表,這時只需進入html編輯頁面,在<head>與</head>中加入以下代碼:

  <style type="text/css">

  BODY {FONT-SIZE: 9pt}

  TH {FONT-SIZE: 9pt}

  TD {FONT-SIZE: 9pt}

  </style>

  
完成後即可見到效果。

  如果要使一些網頁應用相同的設定,就要使用外部樣式表。首先在frontpage中建立一個樣式表,具體步驟是依次點擊檔案--建立--網頁,在快顯視窗中點擊樣式表,並選擇普通樣式表。然後,鍵入以下代碼:

  BODY {FONT-SIZE: 9pt}

  TH {FONT-SIZE: 9pt}

  TD {FONT-SIZE: 9pt}

  
注意:如果直接拷貝進去,會產生多餘代碼。

  將此檔案儲存在網站目錄下。編輯網頁時,點擊格式--樣式表連結,在快顯視窗中選擇以上檔案即可。

  上面所講述的僅僅是css的一些簡單應用,只要你能夠深入的瞭解css,並熟練的運用它,就能將你的網頁創造得更加完美。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.