A. 網頁上常見的字體是什麼字體
字體在網站中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作。今天跟大家分享下在網站當中常用的8款字體。
都知道,字體主要分為稱線字和無稱線字。其實細分的話還有等寬字體、夢幻字體和花體字。但今天我們主要針對常用的稱線字和非稱線字來講。
稱線字和非稱線字的區別可以看下圖:
可以看到左邊的中文和英文字屬於稱線字,右邊中文和英文屬於非稱線字。稱線字指的是在字的筆畫開始、結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。比如我們常用的宋體,觀察比劃可以看到橫細豎粗的特點,這就是典型的稱線字。非稱線字也叫無稱線字,無襯線字體沒有這些額外的裝飾,而且筆畫的粗細差不多。比如微軟雅黑。
稱線字體容易識別,它強調了每個字母筆畫的開始和結束,因此易讀性比較高,非稱線字則比較醒目。所以,在使用的過程中需要根據網站的定位而選擇相應的字體。
下面簡單給大家介紹網頁中常用的幾種字體:
1、微軟雅黑
Vista之後新引入的字體,這個字體的使用率不用說了,可以說是web裡面最安全的一個字體。字體方正、簡潔,被廣泛使用。
上海大眾這個網站默認的首選字體就是微軟雅黑,整體比較簡潔。
2、黑體
黑體字和微軟雅黑差不多,作為非稱線字中的一種,一樣具備方正、簡潔、醒目的特點。這樣的字體特別適合當標題。其實黑體在使用上沒有微軟雅黑來得清晰明亮,一般在微軟雅黑和黑體的選擇下,個人更傾向微軟雅黑。
佳能的官網默認首選的字體就是黑體,字體簡潔醒目。
3、華文細黑
華文細黑是Mac下的默認中文,這套字體跟前面的微軟雅黑相比較,更顯絹細、秀氣。筆劃細節比微軟雅黑處理的多一些,所以整體給人比較精緻的感覺。注意一下,華文細黑並不是所有電腦的自帶字體,當網站文字用到這個字體的時候,是需要在自己電腦上下載這套字體的。除此,在寫css代碼的時候,font-family應該設置的選擇性多一下,以保證界面打開的最佳效果。
這個字體就不給大家做展示效果了,因為這個不是系統的默認字體,電腦上沒有安裝這個字體的也看不到網頁的原始效果。
4、中易宋體
前面介紹的三款字體都是非稱線字,接著要介紹的是稱線字體——中易宋體,簡稱宋體。宋體在我們的日常中使用范圍也很廣,這是電腦自帶的其中一種字體。宋體是為適應印刷術而出現的一種漢字字體。筆劃有粗細變化,常用於書籍、雜志、報紙印刷的正文排版,所以在大篇幅文章的設計時,可以採用宋體。這個字體是Windows系統下最常見的字體,小字體點陣,大字體TrueType。大標題顯示時字體不是很好看,所以一般不建議用宋體來當標題。
上海漢路律師事務所的網站就是採用了宋體字,這種字體的選擇一般出現在一些個性比較強的網站中,傳統、專業、公正、官方、權威,宋體就表現了這種特點。
5、 Arial
說到Arial,這套字體是微軟公司網頁核心字體之一,最常用的sans serif字體,當字型大小很小時不容易閱讀。但是,大寫的「I」和小寫的「l」是無法區別的,所以一般可以考慮用Tahoma字體來替代。這套字體方正、不花巧、方便閱讀和印刷清晰。使用范圍也是特別的廣泛。但是要知道的是,蘋果系統下是沒有這套字體的,蘋果系統下默認的是Helvetica。
可以看下禪道項目管理軟體的英文網站,幻燈片採用的字體就是Arial,可以看下這套字體在幻燈片下粗細的組合形態。
6、Tahoma
Tahoma是英文Windows操作系統的默認字體,這個字體比較均衡,是種非常圓滑的字體。這個字體和中文混排顯示時,不會出現中英文不對齊的狀態。這套字體解決了Arial大寫「I」與小寫「l」難以分辨的問題。也相當於在Arial上優化了不少。除此,細看這套字體,可以發現其實在一些筆劃的處理上還是很精緻的。
zui前端框架網站,英文字體的設置上也用到了這個字體,雖然不是第一優先選擇,但是可以看出Tahoma這套字體的使用率也是很高的。
7、Helvetica
說到Helvetica這套字體,應該是設計師們的最愛了吧。這套字體屬於 Realist風格,擁有簡潔現代的線條,受到大部分設計師的追捧。這種字體給人一種簡單、現代化、休閑輕松的感覺。適用於扁平化設計,也適合搭配任何設計項目,包括banner、平面設計以及網頁字體等。在Mac下面被認為是最佳的網頁字體,但在Windows下由於Hinting的原因顯示很糟糕。
這個字體主要體現在蘋果官網上,可以看下美國的官網。
8、Georgia
說到英文的稱線字,肯定首選是Georgia。這套字體筆劃粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還不錯。此種字體風格優雅又精緻,可用於電影海報、游戲、時尚類網頁設計中。
林肯的官網,Georgia是官網的第二優先選擇顯示的字體。網站比較現代,在一些幻燈片當中結合了Georgia字體,稱線字和非稱線字的相結合,可以使得整個網站更生動。
在專業的網頁設計里,除了Banner圖、廣告語等特殊情況可能會用到特殊字體,網頁中使用的字體以不超過2種為准,並且最好採用標准字體,比如中文的宋體、微軟雅黑,英文的Arial、Helvetica。只有使用這些系統自帶的字體,才能讓前端開發人員在排版時高程度地還原設計稿的文字效果。倘若使用了特殊字體,在設計font-family的時候,應該多設置幾種字體的優先順序,以確保網頁顯示的最佳效果。當然,我們一般情況下建議使用系統自帶的字體。
以上8種網站中常用的字體介紹和示例,希望可以對大家有所幫助。
B. 前端做網頁的時候是怎麼選擇字體,顏色的
字體和字體顏色用css樣式,字體在頁面屬性中也有。
C. 前端主要學什麼
分享一份Web前端的學習路線,包含所有要掌握的知識點。可以參考下:
1、前端頁面重構。主要內容為PC端網站布局、Photoshop 工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局,可實現響應式布局,一套代碼適配 PC 端、移動端、平板設備等。
2、前後端網頁交互。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及插件使用、設計模式及插件編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前後端交互、前端工程化與模塊化應用以及PC 端全棧開發項目等。學習目標是可以掌握前端工程化工具,如 git、gulp、Webpack 等,搭建項目及開發項目。
3、Node.js + 前端框架。主要內容為Node.js 全面進階、Koa2+MongoDB搭建服務、Vue.js 框架、React.js 框架、小程序雲開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據,實現復雜數據展示類項目,能夠獨立完成前後台相關功能,勝任HTML5全棧開發工程師職位。
很多學習Web前端的朋友都希望在學成後能找到一份滿意的工作,所以我們在學習過程中一定要注意實戰經驗的積累,如果你所學的東西對企業沒有用,那你所做的一切都是無用功。
D. 網頁前端需要各式各樣的字體如何載入更快!
css3可以實現接入本地字體,只要網上有的字體css3都可以實現。
E. web前端字體定義有哪倆種方式
微軟公司的網頁核心字體之一,最常用的sans serif字體,當字型大小很小時不容易閱讀。但是,大寫的「I」和小寫的「l」是無法區別的,你可以考慮用Tahoma字體來替代。
F. 前端開發怎麼使用avenir字體
avenir-medium只是一種字體,你所問的css怎麼引用,要用到@font-face來先定義好這種字體,這樣當用戶電腦上不存在這種字體的時候,就會自動從伺服器下載這種字體然後顯示出來。
G. 前端設計中,哪些中文字體兼容性好又好看
前端設計師能做的就是為各平台指定各自最好的字體。為 Windows 指定微軟雅黑或中易宋體點陣。為 Mac OS X 指定冬青黑體簡體中文或華文黑體
H. 前端設計中,哪些中文字體兼容性好又好看
網頁中的中文字體那隻能是「微軟雅黑」啦Microsoft Yahei
I. web前端開發工具 for mac 字體要好看 有哪些 知乎
會點設計,不要求精湛,處理圖片,設計個小廣告是要的;
精通HTML+CSS,並能快速處理各瀏覽器兼容問題;
熟練掌握Javascript或Actionscript,精通加分;
熟練使用JS框架,如jQuery/YUI等,並解讀過源碼,熟練多框架加分;
精通Ajax技術,必須的;
精通開發調試工具,如Firebug等;
代碼語義化,懂優化,壓縮和反壓縮;
對SEO有一定的了解,尤其是HTML結構和標簽的使用;
高效合成CSS Sprite;
了解伺服器方面基本知識;
熟練掌握一門後端語言,如PHP/ASP.NET等,絕對加分項;
有自己的網站(看對網站所有東西的把握);
對移動開發有一定的了解和涉入;
熟練HTML5和CSS3技術(主要用於移動應用開發);
效率開發,精湛的開發軟體操作;
有過用戶體驗研究,更關注人性化頁面開發;
了解瀏覽器工作原理,了解w3c標准,了解web2.0。
……
J. 我想問前端的大神這個頁面的字體什麼到底是什麼字體
font:14px/24pxarial,"5b8b4f53",sans-serif,tahoma,"MicrosoftYaHei";