我正在創建的網站有一個相當大的橫幅標題文本。使用普通字體會使其看起來非常鋸齒,但它看起來像一個反鋸齒圖像會是一個相當大的下載。哪種方式是最好的選擇,還是有更好的方法來處理大型遊戲?文字與圖像的網站標題橫幅?
以下是純文字橫幅。縮小它並不明顯,但全尺寸大約600px。單獨打開的圖像效果十足:
我正在創建的網站有一個相當大的橫幅標題文本。使用普通字體會使其看起來非常鋸齒,但它看起來像一個反鋸齒圖像會是一個相當大的下載。哪種方式是最好的選擇,還是有更好的方法來處理大型遊戲?文字與圖像的網站標題橫幅?
以下是純文字橫幅。縮小它並不明顯,但全尺寸大約600px。單獨打開的圖像效果十足:
有些字體比其他字體的鋸齒更好。話雖這麼說,一個沒有位移的文字陰影的顏色作爲一個像素的模糊的文本同樣會治癒你得了什麼病雅多數時間:
h1 {
.
.
.
color: white;
text-shadow: 0 0 1px white;
}
我發現,它只是足以消除鋸齒的字體,如果我沒有使用文字陰影來獲得任何其他效果,那麼對於任何甚至相當現代的東西來說,這都是一個很好的解決方案。舊的瀏覽器(你知道你是誰)會得到鋸齒,但你不能贏得他們。
圖片的方式,我會去。存在techniques out there用於縮小圖像尺寸而不會在質量上放棄太多。另外,一旦首次下載,它可以被緩存,因此不需要再次下載。
我總是建議不要使用圖像文本內容。現代瀏覽器具有內置的抗鋸齒功能,因此大字體看起來比幾年前好得多。 (而且日益變好。)此外,使用<h1>
等標記可以讓您保留標題的語義值,當您使用<img>
標記或CSS background-image
時,標題會丟失。
這工作完美,感謝聰明的解決方案 – Nate 2010-10-19 00:53:27