网球少年主题曲|网球直播188
【沈陽網絡公司選曉天科技】五大營銷型網站推廣系統為您打造:沈陽網站制作,沈陽網站建設,沈陽網站優化,沈陽網絡推廣第一品牌!【萬客寶】
15998287373

想讓企業在互聯網上做得更好的企業家的不二之選!

實戰 專業 落地 高效??

您現在的位置:主頁 > 新聞資訊 > 媒體報道 >

沈陽網頁制作之萬客寶字體選擇法

人氣: 發表時間:2016-11-09 作者:沈陽seo公司

  在沈陽網頁設計的過程中,我們萬客寶的設計師是非常非常非常(重要的事情說三遍}注重細節的,當中客戶關注度比較高的就是字體的設計和選擇,那么什么樣的字需要我們從細節上入手的呢?
  一個非構思性質的頁面,最主要的內容,即是文字。呈現了文字,就會呈現文字排版、字體挑選、字體色彩巨細粗細等細節。而這些細節,一般是十分主要的細節。

  好的字體排版,能夠讓人耐性的看完那些文字,然后得到其間的主要信息,還能夠影響到閱覽者閱覽的心境。一起,字體的挑選、巨細等,還應當合作公司的VI識別體系,還需求合作你著作需求表達的思想感情來斷定(例如古典風格,應當挑選哥特式字體等)。

  好了,對于字體的主要性,我就說這么多,再多說也是廢話,只需咱們知道很主要,要好好挑選調整就好了。

  字體的分類和格局

  襯線和無襯線

  襯線算是一種輔助性的小細節,籠統的談,太過于籠統,咱們來看兩個比如:


  這兩個字體,是有襯線字體,咱們能夠看到在邊角的方位,會多出一些潤飾。這么的優點即是,能夠明晰的分辯出字母和文字,分辯筆劃的開始和停止。可是,這種字體假如設置字體巨細太小的話、或許你里文字較遠,則會遭到襯線影響,分辯不明晰。一起,由于中文體系,默許的字體為宋體,見的太多致使審美疲憊,所以襯線字體對比適宜打印文字以及規范文檔中運用,一般不太適宜運用在頁面中。


  這兩個字體,即是無襯線字體,沒有邊角的潤飾,令人看起來很規整潤滑,沒有毛刺。對比適宜用在頁面中,讓閱覽者獲取很多的文字信息而不會疲憊。

  字體系列

  字體之間最大的差異并不在于有無襯線,而在于字體與字體之間,形體的差異。可是很多字體(特別是英文字體)之間,差異不大,有些新字體甚至是對已有字體進行了纖細的改造后發生的。

  所以,就把字體分成了幾個大的系列,同一個系列中的字體,大體一樣,稱作通用字體系列。其間包含以下五個系列:

  serif :帶襯線字體。Times New Roman 是默許的 serif 字體,中文字體的話,是宋體、仿宋之類的字體。

  sans serif :無襯線字體。Arial 是默許的 sans-serif 字體,中文字體中,微軟雅黑、黑體等都是這類字體。

  monospace :等寬字體。這個字體里邊的每個字母都有一樣的寬度。一般用于顯現程序代碼等,Courier 是默許的 monospace 字體。而對于中文,每個漢字都是等寬的。

  cursive :仿照手寫字體。手寫體,對比特性,一般用于標題、logo等等。這個字體系列沒有默許字體,英文來說,一般用 Comic Sans,中文的話,行書系列、草書系列的字體等,都能夠算作手寫字體。

  fantasy :裝修用字體。多數用于標題,極具特性,字體繁多,藝術字體。無法對其的巨細、形狀下一個一致的結論,所以沒有默許字體,在頁面中,也一般很少用到,除非你有特別的用處構思性的規劃。

  對于通用字體系列的更多解說、描繪和字體舉例,引薦咱們查看在 W3school 上的材料。

  字體的格局

  格局即是指字體表現出來的粗細、寬度和姿態等等特征。看下面的這張圖像:


  里邊的字,是一樣巨細的,一起排放在一條豎線上。為其運用了四種不一樣的字體后,體現出來了不一樣的形態和粗細巨細。在中文字體中,不一樣的字體,在字間隔中一般沒有很大的改動。而在英文字體中,不一樣的字體會改動字母的巨細,致使全體的尺度規劃不一樣,進而致使全部排版紊亂。


  一樣的字體巨細,在不一樣的字體下面,顯現的作用幾乎徹底不一樣。這是英文字體挑選中,對比麻煩和頭疼的疑問。

  字體的挑選

  上面的這些理論,從某些視點和意義上來說,都是廢話。怎么挑選適宜的字體,才真實切合實踐。那么咱們應當怎么挑選在頁面中運用的字體呢?

  處理這個疑問,咱們先應當知道為何要糾結于挑選字體這個疑問。我個人以為應當存在 有用性 和 構思性這兩個方面的因素。構思性極好理解,即是想打破慣例,合作自個的頁面中的規劃思想而挑選相應的字體,例如表達程序員的思想,就對代碼運用等寬字體,表達恐怖、古典,運用哥特式字體等等。這點自個去找字體好了,不再贅述。最主要的疑問是在于 有用性 的方面。

  有用性疑問,即不需求太過于富麗的字體,只需求咱們看的都舒暢、稍微帶點自個的特征即可。你會說,很簡單啊,直接 CSS 界說一條,填上個字體就好了。假如真這么,那就太好了。閱覽器解析字體的過程實踐上是這么的,當閱覽器加載 CSS 后,解析到有關字體的款式,它會在你的體系中查找這個字體,只要找到了相應的字體文件,才會依據那個字體文件對頁面中的文字進行烘托,顯現出你想要的作用。

  已然這么,假如你的操作體系中,并沒有裝置頁面中界說的那種字體,就無法烘托出那種字體的作用,而一般運用當時體系的默許字體來烘托。那么你原有的規劃,就不行了,你規劃時覺得挺好,字體、方位、巨細適宜,但在他人的電腦上,清一色的宋體。所以這個疑問,才是挑選字體的難處地點。當然,有疑問就有處理辦法:

  運用經典通用字體

  不一樣操作體系都有不一樣的字體體系,但已然是字體,總有一些對比經典老牌的字體一起存在于各個體系中。例如無襯線的 Arial 字體,它發生的時間對比早,一起價格低廉,所以從前期就被 windows 操作體系運用,在別的的操作體系中,也會有較好的不一樣于默許字體的顯現作用。所以 我愛水煮魚、潛行者m博客 這些網站,直接在 CSS 中聲明運用一個字體:Arial。

  運用多個字體特點

  上面的辦法很簡略,可是不靈敏,重視簡略而不重視細節。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作為頁面正文的規范字體巨細。可是在如今,感受有點偏小,對比長的文章來說,閱覽者看起來費勁。如今我更建議運用 14px 作為規范字體,16px 作為中等字體,18px 作為較大字體,12px 作為偏小字體對比適宜。

  em :相對巨細,它表明的字體巨細不固定,依據根底字體巨細進行相對巨細的處理。閱覽器默許的字體巨細為 16px,假如你對一段文字指定 1em,那么表現出來的即是 16px巨細,2em 即是 32px 巨細。相對巨細單位有很廣泛的用途,由于它的相對性,所以對跨渠道跨設備的字體巨細處理上有得天獨厚的優勢,一起對于呼應式的規劃規劃也有很大的協助。可是缺陷很明顯,你無法直觀的看到巨細,并且對于不一樣的巨細,你需求準確的核算。

  字體實踐表現出來的巨細

  上面僅僅說了兩種描述字體巨細的單位,但實踐上表現出來的字體巨細,并非簡略的單位前面的數值。除了數值以外,潛行者m 個人以為還跟 設備 和 視距 有關。

  設備即是指顯現設備的分辯率及屏幕巨細,跟前面解說 px 單位的相對性一樣,假如在一塊十分大的分辯率十分低的屏幕(像廣場電子屏),即便很小的像素,也會展示出很大的字。這也即是為何前期的 800×600 像素橫行的時分,咱們都是用12px巨細的因素。由于顯現的文字現已夠大了。

  視距即是指閱覽者看文字的間隔。很明顯的道理,雙眼間隔屏幕越遠,看起來上面的文字就變小了。

  所以在挑選頁面中字體巨細的時分,還需求考慮你的用戶的實踐運用習慣。同一個頁面,在筆記本上和在手機上運用的時分,字體巨細就不應當一樣,由于電腦屏幕大分辯率高,并且視距一般對比近并且固定,手機等屏幕小分辯率較低,視距更近(咱們都喜愛躺著或許趴著玩手機啦),所以這些都要考慮,才干得到一個合理的巨細。

  為何是偶數字體巨細

  經過上面的單位介紹,對于 px 單位中,我舉得比如都是 12px、14px、16px、18px等等,為啥不是11px、15px?這涉及到一個鋸齒的疑問,特別是在前期的顯現器中,一般不能極好的處理文字的鋸齒疑問,而運用奇數的像素,極有也許造成鋸齒,所以默許的一般運用偶數巨細。

  字體的色彩挑選

  字體的色彩挑選同樣是一個主要的細節,可是涉及到配色了,現已超出這篇文章要評論的規模,所以在這兒,我只好簡略的說一下有關頁面中字體色彩的忌諱。

  字體的色彩要樸素、正常

  啥叫樸素正常?一般來說,文章都是白底黑字,黑色的。所以頁面中的文字,一般運用黑色,或許淺灰色,這么愈加契合群眾的口味。假如不是一些很有構思的規劃,請不要隨意的運用色彩。就像 我愛水煮魚 博客里邊的一篇文章


  假如我為它加上藍色,你會怎么想?


  色彩要與背景有必定的對比度

  低對比度,簡單致使字體看不清楚。所以要用高對比度的色彩,例如白底黑字,黑底白字等。不信看下圖:


  假如你在看一篇文章,字體的色彩是上圖中,最下面的那個,你還會再看下去嗎?

  防止特別色彩

  這兒要防止的一些特別色彩,是指頁面中的一些默許色彩。特別是藍色,由于藍色代表著頁面中的超鏈接,假如頁面中有一段藍色的文字,會讓人誤以為是能夠點擊的超鏈接。所以這種色彩要盡量防止。可是有些時分在規劃中,有必要要用到這種色彩的規劃,所以也有一些別的的辦法來處理這個疑問。

  例如潛行者m博客的 Qetro 主題,選用了藍色彩,在正文排版規劃的時分考慮過對于加粗文字的款式。假如運用慣例的粗體黑色來說,較多的加粗內容,會致使頁面文字的紊亂。加粗的意圖是為了醒目,通知閱覽者這是段主要的文字。所以我對文字增加藍色處理。可是這個藍色恰巧就跟超鏈接的默許款式色彩一樣。十分簡單讓人迷惑,所以我將超鏈接的款式帶有默許的下劃線。


  當用戶看到藍色的時分,也許會企圖放在上面看一下,成果無法點擊也沒有成為手指。再往下拉,看到超鏈接的時分,一眼就能夠看出下劃線是能夠點擊的超鏈接。這也是一種還不錯的折中辦法。

  與字體有關的 CSS 特點

  與字體有關的 CSS 特點,一般有以下幾個:font-family、font-style、font-weight、font-size、line-height、 letter-spacing、word-spacing、text-align、text-decoration。

  font-family :用于界說字體,上面有演示不多說。更詳細的材料請看:font-family。

  font-style :用于界說字體的款式,包含正常、斜體、歪斜等,對應的特點值為:normal – 文本正常顯現、italic – 文本斜體顯現、oblique – 文本歪斜顯現。

  font-weight :用于界說文字的粗細,詳細的特點值請看:font-weight。

  font-size :設置字體巨細,不再贅述。

  line-height :用于設置文字中的行間隔,適宜的行間隔對用戶閱覽帶來杰出體會。一起還能夠用于筆直規劃單行文字。

  letter-spacing :設置文字之間的字間隔,使文字之間的間隔增大或許減小。

  word-spacing :用于調整單詞的間隔。

  text-align :用來對齊文字,例如左對齊、右對齊、居中對齊等。

  text-decoration :用來潤飾一段文本,例如增加下劃線等。常對 a 標簽運用這個特點消除其默許的下劃線。

  上面是與字體有關,對比常用的 CSS 特點,還有別的愈加詳細的,能夠參閱網上的材料,引薦 W3school 上面的有關字體的材料。

  運用在線字體

  在 CSS3 中,引入了一個十分強壯并且有用的功用來面對上面的字體挑選疑問。傳統的字體挑選,要你的操作體系中裝置相應字體才干夠顯現。假如你在頁面著作中,運用了別的的構思字體,那么你需求生成相應的文字圖像來更換,不然不會顯現。CSS3 中的這個功用,即是 Web Fonts ,頁面中能夠運用裝置在效勞器端的字體。你能夠將挑選好的字體,上傳到效勞器中,然后運用 CSS3 新增的 @font-face 特點,來調用效勞器上的字體,然后來烘托頁面。

  支撐 CSS3 這一功用的閱覽器,會首先找到效勞器上的字體,然后下載下來進行烘托。這么就徹底處理了本地操作體系中,沒有對應字體的疑問。對于 @font-face 的詳細運用辦法,由于對比多,在這篇文章不再贅述,請咱們自行baidu之:@font-face的運用辦法。

  已然如此,那么挑選的地步就很大了,只需求有字體文件就能夠。所以一些人就開始想,我可不能夠供給一個在線字體的效勞,咱們能夠直接看到字體的作用,然后獲取代碼引用這個字體?所以就呈現了在線字體,對比有名的有 Google 在線字體。

  不要快樂的太早了,自界說字體,目前只能運用在英文中。為何呢?你下載個字體看一下就知道了,一般英文字體只要幾百KB,由于它只需求包含數字、標點、英文字母即可。而中文字體一般十幾M,最小的也要好幾M。由于漢字實在是太多,并且還需求對每個漢字進行規劃制作。這么的話,漢字就沒法運用了,由于你要翻開一個頁面,還需求先下載個幾M的漢字字體,在目前國內的網速是不現實的。