2008-12-08 14 views
16

我學到的一個CSS規則是你應該使用相對的「em」字體大小單位而不是絕對的「pt」。總體思路是將body標籤中的字體大小設置爲「94%」,然後將所有其他元素設置爲這樣的「em」大小。其理由是:是否有任何實際的理由使用「em」而不是「pt」字體大小單位?

  • 然後你可以通過修改身體的字體大小,在一個點更改網站上的所有字體大小的相對大小
  • 用戶,因爲他們自己可以修改字體的大小「EM」

然而,當使用的「EM」代替「PT」中定義的I不斷遇到其中具有字體大小的元件被嵌入在另一元件與字體大小,因此問題,如下面的變得很小(在下面的情況下,一個詞彙單詞是0.8的0.8,另一個是1.2的0.8)。

<html> 
<head> 
    <style type="text/css"> 
     body { 
      font-size: 94%; 
     } 
     p { 
      font-size: .8em; 
     } 
     li { 
      font-size: 1.2em; 
     } 
     .vocabulary { 
      font-size: .8em; 
     } 
    </style> 
</head> 
<body> 
    <p>This is an <span class="vocabulary">egregious</span> test.</p> 
    <ul> 
     <li>This is in a <span class="vocabulary">superb</span> list.</li> 
    </ul> 
</body> 
</html> 

課程很簡單,直接的HTML網站。這是沒有問題的,但在進口樣式表現實世界中,也許你甚至沒有與在控件嵌入到其他控件動態網站製作和他們都用可能的內嵌樣式輸出HTML,我發現有時使用「em」單位字體大小的網站有時是不可能維護的,控制字體大小的方法是將所有東西都轉換爲硬「px」大小。

此外,我剛剛檢查了四個主要瀏覽器,每個瀏覽器都有熱鍵,可以增加和減少「pt」字體的大小。

因此,這裏是我的問題:

  • 沒有任何真實世界的原因,我應該使用的「EM」,而不是「PT」?
  • 是否有使用「em」尺寸的技巧,這樣我就不會遇到上述的嵌入字體大小問題?

回答

11

取決於你居住的國家,你可能最終使用pt而不是em來違法,這取決於你的立法機關想要執行規則的難度。在英國,這裏有一項殘疾歧視行爲,該行爲已被用於瞄準其網站以固定字體呈現的公司。這被視爲歧視,因爲它可能會增加他們的瀏覽器字體大小以彌補部分位置的不利因素 - 但是您的網站仍會呈現您設置的大小的字體,而不是他們預期的大小。

是的,很難掌握相關的字體大小和流暢的佈局,但如果您想遵守立法,您必須花時間去掌握這一點。

對於英國的地方政府工作,已設定目標以確保網站遵循雙A指導原則,其中一條指出「在標記語言屬性值和樣式表屬性值中使用相對而非絕對單位」。見here

+0

嗨皮特,謝謝你的回答。你知道這個法律是否適用於那些有客戶在英國使用他們的UI的基於美國的公司? – 2011-07-28 16:36:51

1

PX:與您的屏幕分辨率和其他相關問題的變化

EM:無論你的屏幕分辨率,這將是相同的所有

+0

我的意思是「pt」,當然不是「px」,對不起。編輯原始帖子。 :-) – 2008-12-08 09:24:42

2

即使你硬 - 以像素爲單位對字體大小進行編碼,您仍然可以使用em來指定頁邊距,長度等。與使用em quad縮小印刷機中​​的段落類似。

編輯(從PX到PT改變了海報後):如果你想成爲「像素完美」,它的安全去與PX而非PT,因爲不同的操作系統有不同的DPI設置,和用戶的變化特別是在Linux上,顯着改變dpi。 PostScript點被定義爲1/72英寸。屏幕上的「英寸」可以在72像素之間的任何地方浮在你的船上。

2

從我作爲誰喜歡大的文本網頁的用戶體驗:

指定「PT」的字體大小是好的,只要你不指定PX/PT元素大小。因爲當你這樣做,並且我增加了文本大小時,一半的文本溢出了元素外部,並且溢出被設置爲隱藏。

這不需要扭曲你的佈局 - 只留下一切向下發展的空間。我可以更好地處理滾動頁面,而不是看不到文字。

2

1)IE6仍被廣泛使用,無法調整在px中定義的字體大小。 =>可用性問題。這是一個禁忌。

2)例如參見CSS Units

3)大多數專家同意說,PT主要是打印單元:在最壞的情況,在打印樣式表,其中調整大小問題消失使用它們...

1

一些專業的CSS開發者,我知道使用「PX 「在現代瀏覽器的主樣式表中定義字體大小,然後爲IE6使用單獨的樣式表,使用相對單位指定它們。這樣,他們實現了可用性,並允許在所有瀏覽器上進行字體放大,但無需在現代瀏覽器上妥協他們的設計。 (他們實際上走得比這更遠了:他們的IE6樣式表關閉了大部分的塊格式,並且只是使用通用的移動界面來設置所有東西,這樣IE6用戶可以看到一個簡單的佈局,其他人都可以得到專業的看看塊實際上正確地浮動。)

相關問題