關於web字型的那些事兒

來源:互聯網
上載者:User

   我曾與一位視覺設計師合作共同開發一款web應用。他提交給我的設計稿看起來非常帶感,於是我根據他的設計稿,用HTML和CSS將web應用寫了出來。當我以為一切都已完成,並且火急火燎地將產品給他看的時候,知道他說啥了麼?

  “你全做錯了。”

  的確。我並沒有根據他的模型來使用字型,為此他專門把我叫出來並告訴我這是一個非常大的錯誤。我該如何彌補呢?

  “我不知道。但是目前它是最大的問題,毫無疑問。”

  說起來,在過去的很長一段時間裡,我都同不同的網頁設計師一起合作開發各種不同的網站,這使得我逐漸開始關注網頁設計中的很多細小但重要的細節了,比如,字型。

  在此可以簡單介紹一點背景知識。目前多數的網站都是基於HTML和CSS來開發的,如果你毫無網站開發經驗,也許你有必要找個HTML&CSS的介紹視頻學習一下,比如1小時建立一個體驗不錯的個人網站頁面之類的教程。

  以下,是我的視覺設計師教授給我的字型知識。

  字型規格

  改變某寫字型樣式最簡單的方式,是改變CSS的Font-family屬性,然後,瀏覽器會直接讀取使用者電腦上的字型,想必每個網站開發人員都明白這件事情。一般而言,一共有12種常見的網站安全字型,除開相對特殊的Comic Sans,還有11款字型可以供你在絕大多數類型的網站上隨意使用。

  如果你的視線僅僅盯著這十來個字型就未免太局限了。如果你足夠敏銳,你會有意識地調整字型的粗線(light、normal、bold)和字間距,追求更好的效果。舉個例子,當你在導覽列中使用特粗的字型,緊湊的字型間距,會讓你的網站看起來更加專業。相反,如果你使用的是極細的字型,網頁會給人一種非常銳利、清晰的感覺。

  另一個使用字型的竅門,就是在CSS中為字型添加字型陰影屬性。

  以下的案例中,字型家族被設定為Helvetica,並且字型粗細被設定為極細。

  這一字型的案例源自於我們的web應用Nomster。

  字型棧

  當你在指定要用什麼字型的時候,你可以根據重要程度來設定一個順序,越靠前的優先順序越高。當裝置中沒有排名考前的字型的時候,那麼系統會自動調用排名靠後的字型。這也就是為什麼windows和Mac內建字型不盡相同,但是最終都能調用合適的字型而正常顯示網頁內容的原因所在。對於這個字型棧的設定,以下的工具/網站應該能幫到你:

  CSS Tricks – Font Stacks:這是一個擁有8個不同字型的字型棧,直接從CSS Tricks抓取這個字型棧,你的網站字型效果肯定不會像1995之前的網站那麼殘廢。

  CSSFontStack.com:一個專業提供各種不同字型棧的網站,超過40種不同字型棧供你選擇~

  當然,如果你通過Google和百度來搜尋應該可以發現更多的字型棧。

  以下的使用案例同樣來自我們的Web應用Nomster。它所使用的字型棧也是我們最喜歡的,因為它確實提高了網站的可讀性。

  載入特定字型

  在web應用中使用特定字型來顯示文本,是一件可行性很高的事情。你不必找一個“看起來很像”的字型來湊合,因為以下的方法可以幫你直接用你喜歡的字型:

  字型託管服務

  將一個普通字型載入到網站上,確實需要一點技巧。字型託管服務可以替你做到這一點,不過有的是免費的,有的是收費的。

  Google web Fonts:Google的字型服務還是非常靠譜的,整合了許多優質的web字型供你調用到網站中去。按照Google官方的指示,你可以輕鬆地在你的web應用中調用這些字型。

  當你想在網站中使用Garamond這個字型的時候,你如果使用字型棧來調用的話,可能會因為瀏覽器差異而無法正常使用,也可能因為本地字型而顯示不正常,而使用Google字型中的“EB Garamond”則不存在這樣的問題,它不會調用本地字型檔,而且大家電腦裡面顯示也會完全一樣。

  Google字型服務是免費而易用的,並且會讓不同的系統不同的瀏覽器都保持一致的體驗,那為什麼會有人考慮其他的方案呢?原因很簡單。Google字型平台所收錄的字型多數是相對更開放甚至是直接開源的字型,但是有很多殺手級字型的開發商並不願意這麼做。作為商品出售字型可以給這些開發商帶來更大的利益,這使得你無法在Google字型平台上找到它們。當然,這個問題也是可以解決的。

  TypeKit :這個字型網站也是耳熟能詳的大站。其中囊括了很多品質優秀的好字型,但是相信我,你看了會後悔的。為什麼這麼說?那些看起來優秀的字型並不便宜!基礎的服務需要每年上交25美元,而進階版的每年需要交100美元!當然,如果不差錢的話,選擇TypeKit也不錯~

  所以,最好不要告訴與你合作的設計師,否則他們會逼著你整套整套得買字型的!(突然意識到這篇文章的讀者會是設計師……)

  那麼以上三種方案就是全部的解決方案了?別傻了,當然不止。Google字型是最著名的免費字型服務商,而TypeKit則是收費字型服務商中最流行的,你要用心找還有大把的字型託管服務商可供選擇。

  自託管字型

  這是一種相對棘手的解決方案。因為這種方法的關鍵完全不在技術上,而是你得深入理解字型的授權和相關法律細節。

  當我們直接從使用者的機器上調用字型,或者使用託管字型的時候,我們完全不用考慮太多,幾行CSS代碼會解決所有的問題。但是,當我們要自己託管字型的時候,就需要明白使用字型的許可權和相應的授權細節了。

  比較高端的玩兒法是你在寫代碼的時候,告訴瀏覽器下載字型,並且告訴瀏覽器將去什麼地方尋找字型檔(或者多個版本的字型檔),然後告訴瀏覽器這些字型的名字分別是什麼。同時也需要注意,這些字型的類型。常見的字型格式是EOT、OTF、WOFF、TTF、SVG等。不同瀏覽器慣於處理的字型格式可能不一樣,所以最好你得準備好多種不同的字型供不同瀏覽器下載。

  所以,首先你要將你準備好的字型檔轉化成多種不同格式的字型,比如,你準備好一個.ttf格式的字型,那麼你需要將它轉化成.woff、.otf、.svg等格式的字型,然後你就可以設定下載檔案的位置、調用字型的相關資訊了。

  令事情變得棘手的地方就在此了。考慮到你提供給了世界上每個人從你網站上下載字型的機會,那麼當你將字型上傳到伺服器的那一刻開始,人們就可以肆無忌憚地將字型下載到他們的電腦上,分享給朋友甚至用到他們自己的網站上。這就是為什麼很多字型開發商不想讓他們的字型輕易用在網站上。

  因此當你需要下載一個用在自己的網站上的字型之時,你需要尋找授權可以用於網路且免費的字型(當然,不是用於案頭的那種)。

  FontSquirrel:這是一個我特喜歡的免費字型網站,他們的首頁上有一些的超高品質免費字型,並且每個字型的字型許可都已經明確地標註了出來。

  在FountSquirrel上還有另外一個超贊的工具,那就是WebFont產生器。你可以將單個字型檔上傳到產生器中,它會將其自動轉化成你需要的其他字型,並且同時產生相應的CSS代碼,可以供你直接插入到網站代碼中。只要格式允許,WebFont都能轉化,並不規定字型來源。

  除了免費字型,FontSquirrel還賣有大量的字型是收費的。

  以下便是來自FontSquirrel的字型“Pacifico”在我們的Nomster上應用的案例:

  MyFont.com同樣會免費提供少量字型(但是其他字型會收費)的字型網站。當你在這個網站中搜尋自己要的字型的時候,會發現其中絕大多數的字型都是需要你付費的,但是其中有些字型家族中特定粗細的字型是免費提供的,一定要仔細篩選。如果你人品好,真的能淘到好字型。

  最後,關於字型還有三件事情是需要瞭解的:

  1、不同的字型會賦予網站截然不同的感覺,把握好字型的細節就能掌控好網站的感覺;

  2、將字型載入到web應用中的方法有一大把,仔細篩選一種符合自己的;

  3、營造專業和炫酷的呈現效果固然重要,但是網站的最終目的還是傳達資訊,讓人閱讀的。所以在調整效果完之後,不妨猴退一步仔細審視一下,使用者能否讀到所有你寫上去的文字。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。