<noframes id="fr391">

      <address id="fr391"></address>

        西安網捷網站建設技術有限公司

        西安網捷網站建設技術有限公司

        當前位置:首頁 > 行業資訊 > 正文

        網頁設計之字體的設計

        編輯:西安網捷網站建設技術有限公司  時間:2013/01/29

           在網站設計中,一些細節性的東西值得我們去注意,比如字體的顏色、大小等等。千萬不要小看了字體的設計,如果你忽略了這方面的設計,可能給你網站帶來很不好的視覺享受。
          好的字體排版,可以讓人耐心的看完那些文字,然后得到其中的重要信息,還可以影響到瀏覽者閱讀的心情。同時,字體的選擇、大小等,還應該配合企業的VI識別系統,還需要配合你作品需要表達的思想感情來確定。
          字體的分類和格式
          襯線和無襯線
          襯線算是一種輔助性的小細節,籠統的談,太過于抽象,我們來看兩個例子:
          這兩個字體,是有襯線字體,大家可以看到在邊角的位置,會多出一些修飾。這樣的好處就是,可以清晰的分辨出字母和文字,分辨筆劃的起始和終止。但是,這種字體如果設置字體大小太小的話、或者你里文字較遠,則會受到襯線影響,分辨不清晰。同時,由于中文系統,默認的字體為宋體,見的太多導致審美疲勞,所以襯線字體比較適合打印文字以及正規文檔中使用,通常不太適合使用在網頁中。
          這兩個字體,就是無襯線字體,沒有邊角的修飾,令人看起來很整齊光滑,沒有毛刺。比較適合用在網頁中,讓瀏覽者獲取大量的文字信息而不會疲勞。
          字體的格式
          格式就是指字體表現出來的粗細、寬度和姿態等等特征。里面的字,是相同大小的,同時排放在一條豎線上。為其應用了四種不同的字體后,體現出來了不同的形態和粗細大小。在中文字體中,不同的字體,在字間距中通常沒有很大的變化。而在英文字體中,不同的字體會改變字母的大小,導致整體的尺寸布局不同,進而導致整個排版混亂。 相同的字體大小,在不同的字體下面,顯示的效果幾乎完全不同。這是英文字體選擇中,比較麻煩和頭疼的問題。
          字體的選擇
          上面的這些理論,從某些角度和意義上來說,都是廢話。如何選擇合適的字體,才真正切合實際。那么我們應該如何選擇在網頁中使用的字體呢?
          解決這個問題,我們先應該知道為什么要糾結于選擇字體這個問題。我個人認為應該存在 實用性 和 創意性 這兩個方面的因素。創意性很好理解,就是想突破常規,配合自己的網頁中的設計思想而選擇相應的字體,例如表達程序員的思維,就對代碼使用等寬字體,表達恐怖、古典,使用哥特式字體等等。這點自己去找字體好了,不再贅述。最主要的問題是在于 實用性 的方面。
          實用性問題,即不需要太過于華麗的字體,只需要大家看的都舒服、稍微帶點自己的特色即可。你會說,很容易啊,直接 CSS 定義一條,填上個字體就好了。如果真這樣,那就太好了。瀏覽器解析字體的過程實際上是這樣的,當瀏覽器加載 CSS 后,解析到有關字體的樣式,它會在你的系統中查找這個字體,只有找到了相應的字體文件,才會根據那個字體文件對網頁中的文字進行渲染,顯示出你想要的效果。
          既然這樣,如果你的操作系統中,并沒有安裝網頁中定義的那種字體,就無法渲染出那種字體的效果,而通常使用當前系統的默認字體來渲染。那么你原有的設計,就不行了,你設計時覺得挺好,字體、位置、大小合適,但在別人的電腦上,清一色的宋體。所以這個問題,才是選擇字體的難處所在。當然,有問題就有解決方式:
          使用經典通用字體
          不同操作系統都有不同的字體系統,但既然是字體,總有一些比較經典老牌的字體共同存在于各個系統中。例如無襯線的 Arial 字體,它產生的時間比較早,同時價格低廉,所以從早期就被 windows 操作系統使用,在其他的操作系統中,也會有較好的不同于默認字體的顯示效果。所以 我愛水煮魚、潛行者m博客 這些網站,直接在 CSS 中聲明使用一個字體:Arial。
          字體系列
          字體之間最大的差異并不在于有無襯線,而在于字體與字體之間,形體的差異。但是很多字體(特別是英文字體)之間,差異不大,有些新字體甚至是對已有字體進行了細微的改造后產生的。
          于是,就把字體分成了幾個大的系列,同一個系列中的字體,大體相同,稱作通用字體系列。其中包括以下五個系列:
          serif :帶襯線字體。Times New Roman 是默認的 serif 字體,中文字體的話,是宋體、仿宋之類的字體。
          sans serif :無襯線字體。Arial 是默認的 sans-serif 字體,中文字體中,微軟雅黑、黑體等都是這類字體。
          monospace :等寬字體。這個字體里面的每個字母都有相同的寬度。通常用于顯示程序代碼等,Courier 是默認的 monospace 字體。而對于中文,每個漢字都是等寬的。
          cursive :模仿手寫字體。手寫體,比較個性,通常用于標題、logo等等。這個字體系列沒有默認字體,英文來說,通常用 Comic Sans,中文的話,行書系列、草書系列的字體等,都可以算作手寫字體。
          fantasy :裝飾用字體。多數用于標題,極具個性,字體繁多,藝術字體。無法對其的大小、形狀下一個統一的定論,所以沒有默認字體,在網頁中,也通常很少用到,除非你有特殊的用處創意性的設計。
          關于通用字體系列的更多解釋、描述和字體舉例,推薦大家查看在 W3school 上的資料。 yixieshi
          使用多個字體屬性
          上面的方法很簡單,但是不靈活,注重簡單而不注重細節。CSS 做的很好,它可以在一個網頁中,聲明指定多個字體,這樣當寫在前面的字體,在當前操作系統中沒有的話,就會使用后面字體頂替。所以當你看一些網頁作品的時候,會發現它的 CSS 中的 font-family 屬性,指定了一大堆的 字體 名稱。但這個也不是可以隨便指定的,也有一些注意事項。
          你應該這樣做,先確定你網頁中需要用到的字體,然后確定屬于哪個字體系列有無其他的相近字體以及衍生字體,然后編寫字體屬性。順序如下:最想用的字體 》》可以代替的相近字體 》》相近通用字體
          。例如如下寫法: font-family: Times, TimesNR, "New Century Schoolbook",Georgia, "New York", serif;
          這樣的意思就是,優先使用 Times 字體,然后系統沒有的話,查找同型異名的 TimesNR 字體,如果沒有,尋找系統中的相近字體 New Century Schoolbook 等其他字體,最后如果都無法找到,就使用通用字體 serif ,這樣瀏覽器就會尋找系統中的 無襯線 的默認字體,來代替。
          字體的顏色選擇
          字體的顏色選擇同樣是一個重要的細節,但是涉及到配色了,已經超出本文要討論的范圍,所以在這里,我只好簡單的說一下有關網頁中字體顏色的禁忌。
          字體的顏色要樸素、正常
          什么叫樸素正常?通常來說,文章都是白底黑字,黑色的。所以網頁中的文字,通常使用黑色,或者淺灰色,這樣更加符合大眾的口味。如果不是一些很有創意的設計,請不要隨便的使用顏色
          字體的大小選擇
          形容字體大小的單位
          在 CSS 中,最常用的描述字體大小的單位有兩個:em 、px 。通常認為 em 為相對大小單位,px 為絕對大小單位。但從實際應用中來講,px 像素其實也是一種相對大小單位。例如,在一塊15寸分辨率為 800×600 像素的屏幕上,10px 大小的文字,要比一塊10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字顯得更大一些。下面來說一下它們的區別和用法等。
          px :像素單位,10px 表示10個像素大小,在現在的網頁設計中,常被用來表示字體大小。很方便很直觀,但是有一些弊端。對于可用性不太友好,因為是“絕對”單位,所以有些瀏覽器(早期)的字體放大縮小功能失效。瀏覽器的默認字體大小為 16px ,早期的網頁,由于屏幕分辨率比較低,通常采用12px作為網頁正文的標準字體大小。但是在現在,感覺有點偏小,比較長的文章來說,瀏覽者看起來費勁?,F在我更主張使用 14px 作為標準字體,16px 作為中等字體,18px 作為較大字體,12px 作為偏小字體比較合適。 互聯網的一些事
          em :相對大小,它表示的字體大小不固定,根據基礎字體大小進行相對大小的處理。瀏覽器默認的字體大小為 16px,如果你對一段文字指定 1em,那么表現出來的就是 16px大小,2em 就是 32px 大小。相對大小單位有很廣泛的用途,由于它的相對性,所以對跨平臺跨設備的字體大小處理上有得天獨厚的優勢,同時對于響應式的布局設計也有很大的幫助。但是缺點很明顯,你無法直觀的看到大小,而且對于不同的大小,你需要精確的計算。
          字體實際表現出來的大小
          上面只是說了兩種形容字體大小的單位,但實際上表現出來的字體大小,并非簡單的單位前面的數值。除了數值之外,潛行者m 個人認為還跟 設備 和 視距 有關。
          設備就是指顯示設備的分辨率及屏幕大小,跟前面解釋 px 單位的相對性相同,如果在一塊非常大的分辨率非常低的屏幕(像廣場電子屏),即使很小的像素,也會展示出很大的字。這也就是為什么早期的 800×600 像素橫行的時候,大家都是用12px大小的原因。因為顯示的文字已經夠大了。
          視距就是指瀏覽者看文字的距離。很明顯的道理,眼睛距離屏幕越遠,看起來上面的文字就變小了。
          所以在選擇網頁中字體大小的時候,還需要考慮你的用戶的實際使用習慣。同一個網頁,在筆記本上和在手機上使用的時候,字體大小就不應該相同,因為電腦屏幕大分辨率高,而且視距通常比較近而且固定,手機等屏幕小分辨率較低,視距更近(大家都喜歡躺著或者趴著玩手機啦),所以這些都要考慮,才能得到一個合理的大小。 一些事
          為什么是偶數字體大小
          通過上面的單位介紹,對于 px 單位中,我舉得例子都是 12px、14px、16px、18px等等,為啥不是11px、15px?這涉及到一個鋸齒的問題,特別是在早期的顯示器中,往往不能很好的處理文字的鋸齒問題,而使用單數的像素,極有可能造成鋸齒,所以默認的通常使用偶數大小。

        上一條:暫時沒有!

        下一條:SEO優化之站內優化技巧

        暴露放荡的娇妻

            <noframes id="fr391">

            <address id="fr391"></address>