在網頁(Web)上應用字體對于網頁設計師來說是一項基本技術,網頁設計中個性化同時也是一門考驗人的藝術。本期的網頁設計與制作學習將教大家一步步打造個性化的網頁字體。感興趣的朋友可以接著往下看,不妨了解一些相關的知識,說不定有你需要的點,現在的網頁設計中很多字體特性被嵌入**版HTML和CSS標準中,我們不僅要懂得其中的運用,更需要知道網頁字體的原理所在。不廢話了,現在把自己了解的關于個性化web字體方面的信息推薦給各位學習愛好者。
1、了解字體的用途
首要任務是檢查將被用來做什么的字體。基本上所有的字體用的都是相似的,但有些字體比其他人更合適。 Unicode編碼的字體提供了數以千計的字形的可能性,和OpenType字體格式都支持更多的功能,如連字和上下文交替的自由等。但是,質量取決于創造的標準字體的字體設計師。如果設計者忽視繪制所有必要的字符,或忘記創建相關的功能,則布局的細節也變得意義不大。專業打造字體需要大量的時間和精力,但一些設計師并沒有做好充足的準備。因此,包括在頁面設計的字型,檢查它們的字符集與功能工作變得很重要。字體像工具箱,有時幾乎是空的工具箱中,使用受到限制,因為字體僅大寫字母,小寫字母,數字和相同的一些基本的拼寫;有時它缺少一些關鍵的工具,如果有一把螺絲刀,一個鋸,但沒有敲定,有些東西釘住在難以完成。
2、巧妙的字集
“字體回滾”(Font Fallbacks)是以單個字符為基準發生的。一旦字符在指定的字體中丟失,回滾系統就會自動從列表中的下一個字體調用這個字符,然后切換回原來的字體。靈活利用這項特性可以達到驚人的效果。舉例來說,字體的字符集不具有舊式風格的數字,那么可以找到具有對應數字的字體;刪減該字體,只留下所需數字,將其放入回滾列表。文本中的所有數字就會以舊式風格的方式呈現,而其余部分將會以正常字體顯示。這可以使你不必對數字進行分別格式化,也擺脫了頁面中多余的HTML標簽。
一步步打造個性化的Web字體
3、弄懂數字
現在許多專業級的字體都具有幾個不同的數字字符集。每個字符集都有它特殊的用途。表格式數字占據相同的空間,讓它們垂直排列,而寬度比例數字與其設計相符– 舉例來說,數字4要比1寬得多。一方面,舊式風格數字的設計模仿了帶X高度屬性,上行和下行字母的的小寫字符,使其與大小寫混合的文本**融合。另一方面,內襯的數字用于數值,或與大寫文本一起使用。
4、切勿偽造字體
CSS使你可以偽造一些事情。如果字體本身沒有粗體的變體,b標簽可以通過雙重渲染+略微側移的方式將文本人為地加粗。為沒有斜體樣式的字體加上i標簽可以實現斜體效果。由此產生的扭曲字符令人慘不忍睹。更重要的是避免使用b和i標簽,而用strong和em取而代之。前者只涉及字體的外觀,也就是所謂的Bold和Italic. 但或許你只想通過改變顏色和大小的方式強調文本。所以明確你的目的就變得重要了– 加粗字符,抑或強調內容?使用后者賦予你通過CSS文件輕松改變文本外觀的自由。一般來說,在CSS文件里定義所有的文本樣式,盡可能避免局部樣式定義。
一步步打造個性化的Web字體
5、 但如果你必須偽造的話,逼真些
當字符集當中缺少小號大寫字母時,偽造它們總會使其相較周圍字體過于單薄。倘若字體樣式有一個半粗體的變體,或普通和粗體的粗細程度相差無幾,那么可以使用更粗的那個來調節文本的明暗程度。別忘了給小號大寫字母一點額外的字符空間。
6、謹慎使用復制粘貼
有時候你會在頁面中本應是重音或其它特殊字符的地方發現難以辨認的字符。當從文本編輯軟件中復制非UTF-8編碼的文本時會產生這種情況。字符編碼系統將所有的字形映射至給定的字符集,以方便通過網絡或存儲介質傳輸數據(主要是文本或數字)。
盡管HTML可以兼容UTF-8,但它會曲解從其它任意編碼系統中直接復制的文本,將特殊字符變為隨機字母和符號的奇怪組合。此外某些內容管理系統在復制文本的同時也會一并復制格式,造成不可預知的后果。要避免這種問題,**的辦法是使用簡易文本編輯器將復制的內容轉換為純文字的格式,而后從那里復制并粘貼到CMS當中。
7、學習HTML實體
看看你的鍵盤– 你可能沒有意識到可用的字符是多么豐富。它們當中的很多是被HTML實體定義的,所以熟記常用的實體是必要的– 便于頁面全局排版。你不能直接使用小寫的x代替乘法符號,商標符號不僅僅是一個簡單的大寫T和大寫M,浮動的重音符也不能代替引號。
一步步打造個性化的Web字體
8、正確的引用
說到撇號,正確的形式應該是閉合單引號。一個凸顯出不成熟的例子是直引號的使用,它同時也被注重形式的設計師稱為‘啞巴引號’。然而,使用合適的卷曲單引號或雙引號是不夠的。不同的語言有不同的引號使用形式。舉例來說,法語使用的引號是指向外側的三角標識符,而在德語中引號的方向則指向外側。
9、了解破折號
連字符用來連接鄰接的詞語,或用于長單詞跨行,以及其它用途。有兩種其它的水平破折號:en破折號一般為em破折號的一半長度。通常情況下我們用它來指示數值的閉合范圍,表示負數,或者闡述兩件事情之間的聯系。em破折號一般和字體等寬,并且一般用于劃定某種想法的停頓,形成嵌入句子中的獨立實體。但其具體用法常常引發爭論。有些人用em破折號代替en,盡管兩者都應該在沒有鄰接空白的情況下使用,很多字體設計者寧愿加入纖細的空白來避免它們觸碰鄰接的字符。
10、定義關系,而非**尺寸
Web文本的**優勢之一就是它可以被用戶調整。如果字體是基于像素定義的,縮放一個頁面可能會引起不同文本樣式間的相對大小差異,舉例來說,正文字號可能會大過標題字號。用相對于標準正文字號的em來定義所有文本是非常關鍵的。這確保了網頁中的所有文本均可產生對應的調整,尊重不同文本字號間的關系。
11、控制換行
縮放瀏覽器窗口會使文本框變得寬敞或擁擠,而終端用戶也可以改變字體大小。這可能令你覺得換行是難以掌控的。但當你對希望達到的最終效果有一個徹底的理解以后,某些特定方面是可以操控的。換行出現在被p或div標簽環繞段落的結尾。在其它情況下,很少有希望下個單詞能從新一行開始而插入換行的做法,因此請謹慎使用
標簽。最常見的原因是要將2個或多個單詞放在一起。不間斷式空格可以確保鄰接單詞永遠處在同一行。可惜的是不間斷式連字符尚未被定義為HTML字符實體。另外,軟連字符或自由裁量連字符只應在必要時出現,當文本列過于擁擠,希望分割開超長單詞時,它們就可派上用場。
12、注意空格
非間斷空格(nbsp)并非HTML中可用的**一種空格字符。全角空格(em space)和字體等寬,能夠形成一個**的方形分隔符。半角空格(en space)的寬度是它的1/2。表格式文本當中最有用的是數字式空格(figure space),和字體中的數字占據相同大小的空間;而標點式空格(punctuation space)與點、逗號的寬度相等;薄空格(thin space)可以在人名縮寫中的點和下一個字母之間使用,而發絲式空格(hair space)可以將長破折號與相鄰的字符分開。還有3倍、4倍、6倍于每全角寬度的空格…
對于閱讀體驗而言,字符之間與內部的間距與字符本身同樣重要。正確的層次結構是字距<詞距<行距。應避免在字母之間添加空格,這會令單詞隔開并影響可讀性。增加字距只能保證對字號很小的文本產生影響。與之相對的是顯示尺寸常常受益于緊密的排列,但同樣要適度。
分散對齊會對文本的外觀產生不利的影響。在對齊文本使之適應行寬的時,詞距被擴大,長短不一的空白分散在文本行當中。這令文本的外觀變得不均衡,某些文本行中甚至會產生難看的間隔。左對齊/右未對是更易于閱讀的排列方式。
除了字距和詞距以外,行距一樣會影響可讀性。過于擁擠的文本行會令文本變得不易分辨。反面來看,如果行距過寬,對于讀者而言,準確找到每個換行之后的下一行將會感到困難。
13、 再進一步
這些小貼士已經可以幫你創造出更加精細的網頁字體效果,但需要學習的東西仍然很多。當你對字體原則了解更加深入,更有自信地使用它們時,你就會明白如何去嘗試并拓寬自己的眼界。在個性化時代里,你會發現個性化網頁字體會讓你創作更上一層樓的。
總計:以上即是本期網頁設計教程中關于打造個性化web字體需要注意的一些事情,各位不妨參考借鑒一下,合理的使用個性化web字體將會為你的網站增色不少,打造屬于自己的個性化Web字體是件不難的事情,慢慢的你會有所收獲的,更多的視頻教程可以登錄課課家官網查詢相關課程學習:http://www.kokojia.com/
資訊來源:http://www.kokojia.com/article/5184.html
|
友情提示:
信息由用戶自行發布,如果發現錯誤或不符合法規或造成侵權,請及時通知本站更正或刪除,具體聯系方式見頁面底部聯系我們,謝謝。 |
當前頁在本站[名站在線]7天內點擊次數(點擊次數為零的日期不顯示): |
信息評估: |
(還沒有網友對該信息作出評估,你想為該信息提供第一個評估嗎?) |
3BDH001000R0001 爆款 現貨!!!3BDH001000R00013BDH001000R0001聯系方式李維
手機18005006671同微信座機0591-83562354
C4-A48/AC230V
C4-A48/AC24V
C4-A48/AC48V
C4-A48/DC110V
C4-A48/DC120-125V
C4-A48/DC220V
C4-A48/DC24V
C4-A48/DC48V
C4-A48/DC60V
C4-A48BX/UC24V
C4-A48D/DC110V
C4-A48D/DC220V
C4-A48D/DC24V
C4-A48DH/DC24V
C4-A48DTX/DC24V
C4-A48DX/DC110V
C4-A48DX/DC120-125V
C4-A48DX/DC220V
C4-A48DX/DC24V
C4-A48DX/DC36V
C4-A48DX/DC48V
C4-A4...3BDH000364R0002 爆款 現貨!!!3BDH000364R00023BDH000364R0002聯系方式李維
手機18005006671同微信座機0591-83562354
C4-A48/AC230V
C4-A48/AC24V
C4-A48/AC48V
C4-A48/DC110V
C4-A48/DC120-125V
C4-A48/DC220V
C4-A48/DC24V
C4-A48/DC48V
C4-A48/DC60V
C4-A48BX/UC24V
C4-A48D/DC110V
C4-A48D/DC220V
C4-A48D/DC24V
C4-A48DH/DC24V
C4-A48DTX/DC24V
C4-A48DX/DC110V
C4-A48DX/DC120-125V
C4-A48DX/DC220V
C4-A48DX/DC24V
C4-A48DX/DC36V
C4-A48DX/DC48V
C4-A4...3BDH000530R1 爆款 現貨!!!3BDH000530R13BDH000530R1聯系方式李維
手機18005006671同微信座機0591-83562354
C4-A48/AC230V
C4-A48/AC24V
C4-A48/AC48V
C4-A48/DC110V
C4-A48/DC120-125V
C4-A48/DC220V
C4-A48/DC24V
C4-A48/DC48V
C4-A48/DC60V
C4-A48BX/UC24V
C4-A48D/DC110V
C4-A48D/DC220V
C4-A48D/DC24V
C4-A48DH/DC24V
C4-A48DTX/DC24V
C4-A48DX/DC110V
C4-A48DX/DC120-125V
C4-A48DX/DC220V
C4-A48DX/DC24V
C4-A48DX/DC36V
C4-A48DX/DC48V
C4-A48DX/DC...3BDM000190R1 爆款 現貨!!!3BDM000190R13BDM000190R1聯系方式李維
手機18005006671同微信座機0591-83562354
C4-A48/AC230V
C4-A48/AC24V
C4-A48/AC48V
C4-A48/DC110V
C4-A48/DC120-125V
C4-A48/DC220V
C4-A48/DC24V
C4-A48/DC48V
C4-A48/DC60V
C4-A48BX/UC24V
C4-A48D/DC110V
C4-A48D/DC220V
C4-A48D/DC24V
C4-A48DH/DC24V
C4-A48DTX/DC24V
C4-A48DX/DC110V
C4-A48DX/DC120-125V
C4-A48DX/DC220V
C4-A48DX/DC24V
C4-A48DX/DC36V
C4-A48DX/DC48V
C4-A48DX/DC...辨別面粉的好辦法有哪些洪樓優子www.hlyz777.com
取少量面粉在手掌上,在白天散射光下,對著光線觀察,正常面粉呈白色或微黃、無雜色,
|
|
|
|
|