0000標題        

網頁文字大小，通常也決定網頁在使用者眼中所看到的重點，網頁使用者通常只注意圖片、大文字、影片幾個要件，通常來說文字在網頁的顯示中，是最先出現（因為純文字的讀取的時間快），而使用者在第一次看到你的網頁的耐心，通常是沒有幾秒的，所以，文字的使用，是相當的重要喔！我們開始來說明文字的大小設定吧！

我們在"如何美化網頁文字(1)-設定網頁文字格式"，就有設定了<h1>的文字大小

<style type="text/css">
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
</style>

設定<h1>為18px的大小，文字將會顯示18px的大小的文字，而設定文字的指令就是

[font-size]

我們在設定文字有幾種設置方式

1、設定大小：也就上述所說的方式，單位有px、pt 等 可以用。

2、關鍵字：可使用large、small等方式來表示。

3、百份比：可使用百分比的方式來表示。

4、行長單位：可使用em的方式類同於百分比的方式表示。


以上四項，第一項為自訂文字大小，意思是不管系統（瀏覽器）預設大小，文字的設定亦為你設定的文字大小，並非因為使用者放大縮小，而依存改變。

第二項至第四項將是和系統有著依存關係的，以下做一些說明

橙子還是先做一個範例吧！橙先把之前例子再修改了一下 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>this is my font style</h1>
<p>The results of a survey <strong>published</strong> Friday showed that 70 percent of local salaried employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p>
<p> According to the survey conducted by 360d, a local job bank, the majority of the respondents said their current situations do not allow them to get married. </p>
<p> Of these, 84 percent said they do not have enough savings and salaries, while 49 percent said their jobs are unstable. Another 41 percent answered in the multiple-choice questionnaire said that they have not met the right person. </p>
<h2>this good page</h2>
<p> Meanwhile, 58 percent of those polled said they need at least NT$1 million (US$33,343.3) in savings before they will decide to walk down the aisle(3), while 92 percent said money can help strengthen their romantic relationships. </p>
<p> About 53 percent of the single respondents said they are not ready for relationships now, citing the lack of money, the extra expenses needed when in a relationship and being too busy with work as their reasons. </p>
<h3>Is my life</h3>
<p>Wesley Yang, a manager at the job bank, said that in light of the weak economy, many moonlighters(4) have arranged plans to a little extra cash on Chinese Valentine's Day, which falls on the seventh day of the seventh month on the lunar calendar, or Aug. 23, this year. </p>
<p>These moonlighting jobs include delivering flowers, queuing up for restaurants or buying gifts on behalf of clients, working as housekeepers at hotels and even as professional huggers who provide hugs on the streets to single people on Valentine's Day, Yang said. </p>
<p>The survey collected 2,051 valid samples from July 31-Aug. 13. It had a margin of error of 3 percentage points and a confidence level of 95 percent. </p>
</body>
</html>

我加入<h2>~<h3><strong>的標籤

1、設定大小：我們可以設定該文字的大小，當你設定了大小後，不管瀏覽器不同，文字將會依你所設定的大小固定。

我們再來改css唄！加入css 

<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
</style>

再來看結果：

2012-10-02_132846  

 

紅色的部份也就是<h1>的地方也就是修改的地方，他的字體為36px，字體有變大了吧！

2、關鍵字： CSS提供有七種keyword，提供你與基準尺寸相對的尺寸：

xx-small,small,medium,large,x-large和xx-large

而他的定義為以瀏覽器預定的大小（16px）為基準，表示他的大小，按照不同的係數來變化大小。

約可這樣比對

xx-small=9px

x-small= 10px

small=13px

large=18px

x-large=24px

xx-large=32px

可以這樣寫：

<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
</style>

 將<h2>設定為x-large;顏色為藍色，看結果：

2012-10-02_133401  

基本上，這個方式只有七種大小可以選擇，在設計上就少了靈活性，建議上還是少用。所以可以用以下方式使用。

 

3、百份比：可使用百分比的方式來表示。

百分比的意思就是，他可以比例的方式，來決定字體的大小，意思是說，預設是16px 如果是100%的話，所顯示出來的，就是16px的大小，如設定成200%，顯示出來就是32%，簡單吧！也就比例的方式表現！

再來改css吧！將<p>的部份都改成75%吧！ 

<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
p {
    font-size: 75%;
    color: #0F0;
}
</style>

 先看結果：

2012-10-02_134342  

 

綠色的部份為修的地方，而字體也相對的變小了，字體變多少了呢？也就是

16px * 75% =12px ，所以，所出現的字體大小為12px。

 

4、行長單位：可使用em的方式類同於百分比的方式表示。

em一詞來自於印刷領域（紙面印刷），是指一種特定字體中一個大寫字母M的高度來到WEB的地方，就是用於字體大小使用尺寸了！

其實，這個和百分比的表現方式並無差別，1em = 100% ，.75em = 75% 也就將百份比除以100，就是em 了，這個使用就看各位是要用哪一個了。最後，還是來改css吧！將<h3>標籤修改成em的方式吧！

<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
p {
    font-size: 75%;
    color: #0F0;
}
h3 {
    font-size: 3em;
    color: #C3C;
}
</style>

 我將<h3>改成紫色且大小為3em，也就是300%，也就是48px的大小，看看結果吧！

2012-10-02_135340  

是不是隨之改變了！


結論：

各種字體的大小設定，並無一定要求哪一個比較好，看個人喜好，而在我設計的網頁中，我習慣都設定成一致，不要有些地方是em 有些地方是px，有些地方是pt，這樣會造成未來你在修改網頁設定的困難度，有時也會很難看一致的寫法，會讓你在修改時，會更加順手！！





 




arrow
arrow
    文章標籤
    網頁設計
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄