網頁字體的美化

psac · 2003-05-29, 10:26 AM

　　本來，我沒打算寫這篇文。因為許多站長都親自撰稿，傳授秘籍了。但很多網頁上的字體仍然沒有「美化」效果，想必還是用了軟體提供的預設字號，所以我也跟著來嚷嚷兩句，湊湊熱鬧。

比如我吧，設計第一篇網頁的時候，就遇到了字體的設置問題。我發現如果用軟體約定的字體大小，則顯示效果會很難看的。我是用Frontpage2000作網頁，在這個微軟大加宣傳的網路軟體裡，文本的設置居然是如此令人失望，可能有它的難處，我不知道。總之，當我研究了半天之後，我明白過來：在顯示器上，中文字體的字號，最保險的，是9pt，11pt也不錯。如果你在word或excel裡設置文本的大小，可很容易找到這兩種字號。但在Frontpage裡，甭想！除非你手工設置「格式」功能表裡的「樣式」。在「樣式」對話視窗裡，你可以對網頁的各個部分進行較為自由的「修改」。修改的內容就是「格式」，有「字體」、「段落」、「邊框」、「編號方式」和「定位」五種。實際上，這些格式內容，在「格式」功能表裡就有的。但在「樣式」設置當中，可以得到更大的自主權。不信你就試試，在某一表格內先隨便寫一段中文，然後開啟「格式」功能表裡的「字體」設置對話視窗。看看在字體大小選項中，是否有9pt？沒有。直接寫上9pt行嗎？不行。沒轍了？別急，請進入「樣式」對話視窗試試，此對話視窗的左邊是「樣式」內容選項，也就是說，讓你選項你想手工設置的具體內容。比如你可以選項「td」，即對表格內容進行設置。「樣式」對話視窗的右邊有一個「修改」按鈕，進入「修改」後，就看到左下角那個討厭的「格式」按鈕了。裡面就是上邊談到的五種選項。我們選「字體」。在這個字體對話視窗中，你可以寫入自己想要的字體大小值，直接寫入「9pt」，再一路「確定」回來，看看頁面上的字體是否聽話？

好了，我們總算找到一種完全通過功能表選定字體大小的方法。用這種方法，你可以設置各種尺寸的字體。（這下微軟又有理了：誰說我們的軟體不是擺脫了編碼的麻煩？）然而，這還不算麻煩麼？

實際上，如果你對編碼這玩意兒不抱成見，肯用心去研究一下，它也不見得有多嚇人。還是以上面這個例子來說吧，我們自定義「td」即表格的字體大小為9pt。那麼，它的編碼是什麼樣的呢？轉到軟體界面左下角的HTML顯示窗，你將看到網頁的HTML編碼。一般都叫它HTML程式碼。

在程式碼的上方，<HEAD></HEAD>區之間，有一句「TD{ font-size: 9pt }」。這就是我們剛才費半天勁設置的「表格樣式」程式碼。實際上，如果你記得住，將這一句直接寫上去就可以了。

現在，我可以告訴你簡單的結果了：在網頁字體的大小設置上，只須在每頁的<HEAD></HEAD>區之間加入以下一段程式碼即可。

<style type="text/css">

body{font-size：9pt}

TH{FONT-SIZE: 9pt}

TD{ font-size: 9pt }

-->

</style>

關鍵的問題倒是：究竟我們可以在網頁上用幾種大小的字體？也就是說，顯示器上的網頁中，有幾種字號是美觀的？9pt是公認的字號。絕大多數網頁都用它。11pt也好看。問題似乎解決了，可是假如你有一段文字想設置得比9pt更小，咋辦？用8pt或7pt行嗎？如果你的顯示器「桌面顯示字體」是大字體，那你會覺得可行。然而且住！大多數顯示器不是1024x768解析度的17寸，而是800x600或者640x480的14、15寸。他們的「桌面顯示字體」往往是小字體，這時，8pt或7pt的顯示效果會很難看，而且基本上看不清。有別的辦法嗎？有！

辦法很簡單，告訴你另一種大小的字體表示法，即：「12px」。它比9pt字號要小，而且在不同的顯示器上，看上去都挺好。所以，你只要將上面程式碼中的9pt改為12px就行了。但你可能會問：我不想要整張網頁都改成12px，而只想讓某一段文字是12px，那又如何是好？

對單獨文本的改動可用這樣的方法：在這一段文本的開頭位置（我是指在程式碼頁），加入這樣一句程式碼：

<span style="font-size: 12px">

如此，這一段文字就是12px的小字體了。OK？

最後，捎帶著講一下「貼上程式碼」的問題。你肯定會拿這些程式碼去貼上的，因為很方便。我們在製作網頁時，常常需要作這樣的貼上。在貼上程式碼時，如果你的程式碼是直接從其它網頁上copy的，則在貼上時軟體很有可能把程式碼看作文本，這時，程式碼不起作用，而且，你會在網頁上看到你剛貼上上的程式碼。如果是這種情況，可以先將copy的程式碼貼上到寫字板上，再copy一次，然後貼入網頁程式碼區內，問題將得到解決。

作者: sron

2003-05-29, 10:26 AM	#1 (permalink)
psac 榮譽會員榮譽勳章勳章總數19 UID - 3662 在線等級: 註冊日期: 2002-12-07 住址: 木柵市立動物園文章: 17381 精華: 2 現金: 5253 金幣資產: 33853 金幣	網頁字體的美化　　本來，我沒打算寫這篇文。因為許多站長都親自撰稿，傳授秘籍了。但很多網頁上的字體仍然沒有「美化」效果，想必還是用了軟體提供的預設字號，所以我也跟著來嚷嚷兩句，湊湊熱鬧。比如我吧，設計第一篇網頁的時候，就遇到了字體的設置問題。我發現如果用軟體約定的字體大小，則顯示效果會很難看的。我是用Frontpage2000作網頁，在這個微軟大加宣傳的網路軟體裡，文本的設置居然是如此令人失望，可能有它的難處，我不知道。總之，當我研究了半天之後，我明白過來：在顯示器上，中文字體的字號，最保險的，是9pt，11pt也不錯。如果你在word或excel裡設置文本的大小，可很容易找到這兩種字號。但在Frontpage裡，甭想！除非你手工設置「格式」功能表裡的「樣式」。在「樣式」對話視窗裡，你可以對網頁的各個部分進行較為自由的「修改」。修改的內容就是「格式」，有「字體」、「段落」、「邊框」、「編號方式」和「定位」五種。實際上，這些格式內容，在「格式」功能表裡就有的。但在「樣式」設置當中，可以得到更大的自主權。不信你就試試，在某一表格內先隨便寫一段中文，然後開啟「格式」功能表裡的「字體」設置對話視窗。看看在字體大小選項中，是否有9pt？沒有。直接寫上9pt行嗎？不行。沒轍了？別急，請進入「樣式」對話視窗試試，此對話視窗的左邊是「樣式」內容選項，也就是說，讓你選項你想手工設置的具體內容。比如你可以選項「td」，即對表格內容進行設置。「樣式」對話視窗的右邊有一個「修改」按鈕，進入「修改」後，就看到左下角那個討厭的「格式」按鈕了。裡面就是上邊談到的五種選項。我們選「字體」。在這個字體對話視窗中，你可以寫入自己想要的字體大小值，直接寫入「9pt」，再一路「確定」回來，看看頁面上的字體是否聽話？好了，我們總算找到一種完全通過功能表選定字體大小的方法。用這種方法，你可以設置各種尺寸的字體。（這下微軟又有理了：誰說我們的軟體不是擺脫了編碼的麻煩？）然而，這還不算麻煩麼？實際上，如果你對編碼這玩意兒不抱成見，肯用心去研究一下，它也不見得有多嚇人。還是以上面這個例子來說吧，我們自定義「td」即表格的字體大小為9pt。那麼，它的編碼是什麼樣的呢？轉到軟體界面左下角的HTML顯示窗，你將看到網頁的HTML編碼。一般都叫它HTML程式碼。在程式碼的上方，<HEAD></HEAD>區之間，有一句「TD{ font-size: 9pt }」。這就是我們剛才費半天勁設置的「表格樣式」程式碼。實際上，如果你記得住，將這一句直接寫上去就可以了。現在，我可以告訴你簡單的結果了：在網頁字體的大小設置上，只須在每頁的<HEAD></HEAD>區之間加入以下一段程式碼即可。 <style type="text/css"> body{font-size：9pt} TH{FONT-SIZE: 9pt} TD{ font-size: 9pt } --> </style> 關鍵的問題倒是：究竟我們可以在網頁上用幾種大小的字體？也就是說，顯示器上的網頁中，有幾種字號是美觀的？9pt是公認的字號。絕大多數網頁都用它。11pt也好看。問題似乎解決了，可是假如你有一段文字想設置得比9pt更小，咋辦？用8pt或7pt行嗎？如果你的顯示器「桌面顯示字體」是大字體，那你會覺得可行。然而且住！大多數顯示器不是1024x768解析度的17寸，而是800x600或者640x480的14、15寸。他們的「桌面顯示字體」往往是小字體，這時，8pt或7pt的顯示效果會很難看，而且基本上看不清。有別的辦法嗎？有！辦法很簡單，告訴你另一種大小的字體表示法，即：「12px」。它比9pt字號要小，而且在不同的顯示器上，看上去都挺好。所以，你只要將上面程式碼中的9pt改為12px就行了。但你可能會問：我不想要整張網頁都改成12px，而只想讓某一段文字是12px，那又如何是好？對單獨文本的改動可用這樣的方法：在這一段文本的開頭位置（我是指在程式碼頁），加入這樣一句程式碼： <span style="font-size: 12px"> 如此，這一段文字就是12px的小字體了。OK？最後，捎帶著講一下「貼上程式碼」的問題。你肯定會拿這些程式碼去貼上的，因為很方便。我們在製作網頁時，常常需要作這樣的貼上。在貼上程式碼時，如果你的程式碼是直接從其它網頁上copy的，則在貼上時軟體很有可能把程式碼看作文本，這時，程式碼不起作用，而且，你會在網頁上看到你剛貼上上的程式碼。如果是這種情況，可以先將copy的程式碼貼上到寫字板上，再copy一次，然後貼入網頁程式碼區內，問題將得到解決。作者: sron

	送花文章: 3, 收花文章: 1631 篇, 收花: 3205 次

Google 提供的廣告