整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天為大家精選免費(fèi)可商用字體（可在文末領(lǐng)取素材！）
近日看到一則新聞，有位淘寶賣家公布了自己和方正維權(quán)人員的聊天截圖，并在群里向周圍賣家求助。
看完這一幕，大多數(shù)人是否都很驚訝，畢竟“字體侵權(quán)”很多人都毫無意識，甚至沒聽說過！隨著方正，漢儀等公司的維權(quán)運(yùn)動的展開，這樣的事情，已經(jīng)是屢見不鮮了。就連微軟雅黑也要開始收費(fèi)了……
作為設(shè)計師，如果用了未授權(quán)的字體，說不定哪一天就被字體公司告侵權(quán)了，還有可能被罰款，如果設(shè)計師用了未授權(quán)的字體，一般會被字體公司智能系統(tǒng)掃描到，一但被他們發(fā)現(xiàn)，首先就會給公司發(fā)律師，公司收到律師函就會找到設(shè)計師。。。就問設(shè)計師們，你們還敢用未授權(quán)的字體嗎？
現(xiàn)在市面上也有很多免費(fèi)可商用的字體可供大家使用，小編都全部統(tǒng)計下來了，可在文末領(lǐng)取素材！
同時我們要感謝那些無私設(shè)計字體的人們 ！是他們的辛勤付出，免費(fèi)分享才讓我們有這么多的免費(fèi)字體可商用，小編通宵達(dá)旦的統(tǒng)計了，也盡量核實過授權(quán)信息，也提供了授權(quán)出處，方便大家查閱所有字體都打包了。可在文末下載！
免費(fèi)可商用字體
早前 Google 與 Adobe 曾合作推出了轟動業(yè)界的免費(fèi)中文字體——「思源黑體」以及「思源宋體」，它們不僅可以免費(fèi)商用，而且更贊的是它還是開源的。這意味著，任何人都能在它的基礎(chǔ)上進(jìn)行修改和二次創(chuàng)作，設(shè)計出更多不同的新樣式字體。今天介紹的「思源柔黑」和「思源真黑」正是由思源黑體衍生出來的字體，包含簡繁中文和日文，同樣開源可免費(fèi)使用，加上字體優(yōu)雅清晰，非常值得大家下載收藏并應(yīng)用到各類作品中去……
授權(quán)出處：
https://www.google.com/get/noto/
授權(quán)出處：
https://www.google.com/get/noto/
思源柔黑一共發(fā)布了 3 個版本，分辨是標(biāo)準(zhǔn)版、L、X。它們的區(qū)別在于圓角的圓潤程度不同，L 圓角最小 (最尖)，X 圓角最大 (最圓)，而標(biāo)準(zhǔn)版則是介于兩者之間。每個版本都有 7 種字重，3種字形樣式 (包括等寬字體)，大家可以根據(jù)喜好選擇使用。
授權(quán)出處：
http://jikasei.me/font/genjyuu/
思源真黑體(源真ゴシック) 同樣保留了思源黑體原版的優(yōu)雅以及高可讀性的特色，也是提供了 7 種不同的字重、3種字形樣式 (包括等寬字體、比例字體)。格式上轉(zhuǎn)換成 TrueType (TTF) 版，細(xì)節(jié)上也做了很多的調(diào)整與變化，使得整套字體看起來更加銳利清晰，更適用于大量文字閱讀顯示、代碼編程、排版、打印等。
授權(quán)出處：
http://jikasei.me/font/genshin/
該字體庫由思源宋體改造而來，由日本字體愛好者創(chuàng)作，改造后整體相當(dāng)霸氣，充滿陽剛之氣，有一種EVA的感覺，本字體可免費(fèi)商用
授權(quán)出處：
http://www.flopdesign.com/blog/font/5228/
該字體庫是由日本字體愛好者創(chuàng)作，將思源宋體進(jìn)行改造而來，有著戰(zhàn)損風(fēng)格的霸氣感覺，非常硬漢。
授權(quán)出處：
https://www.flopdesign.com/blog/font/5146/
中文字體，指定5款字重。允許任何個人和企業(yè)免費(fèi)使用，包括商業(yè)用途
授權(quán)出處：
https://alibabafont.taobao.com/wow/alibabafont/act/alifont?spm=a213iq.12741207.8414978282.3.6cce461dJimvqz&wh_biz=tm&acm=lb-zebra-476210-6318052.1003.4.5750882&scm=1003.4.lb-zebra-476210-6318052.OTHER_15543966436832_5750882
是一款電腦可商用字體，該套字體是漢儀與OPPO合作于2019年推出面向全社會可使用的免費(fèi)字體，字體端莊大氣，充滿科技美感。OPPO Sans 字體簡潔富有變化的線條融入曲線的美學(xué)，適合用來作為 IT 數(shù)碼類海報 Banner 等各類作品的設(shè)計素材使用，實用性相當(dāng)廣泛
該字體庫有著非常詼諧的氣質(zhì)，筆鋒較小，撇捺較重，非常可愛令人親近的感受，而且此字體是漢儀字庫首款免費(fèi)可商用字體
授權(quán)出處：
https://www.zcool.com.cn/article/ZNjk4NDM2.html
該字體庫是銳字家族的首款免費(fèi)商用字體，商業(yè)用途無限制使用，字體風(fēng)格張弛有度，落筆簡練
授權(quán)出處：
http://reeji.com/
是一款電腦字體包，該字體庫是完全免費(fèi)可商用的，擁有7個字重，粗細(xì)風(fēng)格多樣，字庫文字量覆蓋龐大，幾乎不會出現(xiàn)缺字的情況沐瑤軟筆手寫體字體該字體庫是春顏秋色夫妻倆為女兒制作的字體包，完全手寫創(chuàng)作，并且將版權(quán)公開，所有人都能無限制的使用這款字體
授權(quán)出處：
https://mp.weixin.qq.com/s/7kv3i_YEs7x9_9IrCDYvBA
免費(fèi)字體包括四種字體：方正黑體、方正書宋、方正仿宋、方正楷體。
授權(quán)出處：http://www.foundertype.com/index.php/About/bookAuth/key/my_sysq.html
免費(fèi)字體：源樣明體 源流明體 源云明體 臺灣最活躍的字型社團(tuán)「字嗨」管理員 But Ko ，釋出三款改造自思源宋體的繁體中文字體，開放給需要的使用者免費(fèi)下載！
授權(quán)出處：
https://github.com/ButTaiwan?tab=stars
Droid Sans Fallback是Android設(shè)備初期時默認(rèn)的中文字體，由谷歌委托臺灣華康科技設(shè)計的，與微軟雅黑很像。
授權(quán)出處：
https://code.google.com/archive/p/droid-sans-mono-py/
由思源宋體改造而來，由日本字體愛好者創(chuàng)作，改造后的字體更加靈動活潑，線條更纖細(xì)，本字體可免費(fèi)商用
授權(quán)出處：
http://fonts.jp/hanazono/
站酷作為中國人氣設(shè)計師互動平臺，不僅聚集了百萬優(yōu)秀設(shè)計師，也分享了多款免費(fèi)字體可供商用。站酷高端黑便是站酷網(wǎng)近百名設(shè)計師參與創(chuàng)作開發(fā)的，免費(fèi)字體：站酷酷黑體、站酷意大利體、站酷快樂體、站酷高端黑體 、站酷小薇LOGO體、站酷文藝體、站酷慶科黃油體
授權(quán)出處：
http://www.zcool.com.cn/special/zcoolfonts/
站酷慶科黃油體是一款字型創(chuàng)新、線條圓潤的字體。筆劃的每一個直角，都被處理成了半徑為4pt的圓角。在設(shè)計中需遵循筆劃簡化但不省略，筆劃角度盡量為垂直角度。字體部首的右下角均為45°缺角，提高了字體視覺中心，并有效的解決了一些字體因筆劃交叉，字體閱讀困難的毛病。
授權(quán)出處：
http://www.zcool.com.cn/work/ZMTg5MDEyMDQ=.html
龐門正道標(biāo)題體、龐門正道粗書體、龐門正道輕松體
免費(fèi)字體：限時，不限量，不收費(fèi)，隨便用！
授權(quán)出處：
https://mp.weixin.qq.com/s/BGXeAXrEo6CM5-gtdQOuYA
851手寫雜字體，自由改造與再配布，可商用，但保留著作權(quán)
授權(quán)出處：
http://www39.atpages.jp/yagoinienie/851fontpage.html
來自一家破產(chǎn)的字體公司，現(xiàn)在開源了！
授權(quán)出處：https://github.com/zenozeng/Free-Chinese-Fonts/issues/13
問藏書房是造字工房創(chuàng)始人丁一將二十余年收藏和學(xué)習(xí)的數(shù)千本設(shè)計、繪畫、攝影、字體等藝術(shù)圖書全部捐助于問藏書房而創(chuàng)建。意向通過問藏書房免費(fèi)借閱給對設(shè)計與藝術(shù)、美學(xué)類相關(guān)知識有興趣的同學(xué)。
有簡體和繁體，也有日韓、歐美版
授權(quán)出處：
http://www.wencang.com/font.jsp
該字體庫是刻石錄系列字體中對簡體字包含最好的，并且有持續(xù)的進(jìn)行更新，大多數(shù)文字都有覆蓋，并且開源免費(fèi)商業(yè)使用，免費(fèi)字體：刻石錄鋼筆鶴體、刻石錄明體、刻石錄顏體
授權(quán)出處：
http://founder.acgvlyric.org/iu/doku.php
Oradano-Mincho名朝是一款日本鉛字印刷效果字體，很有味道的一款印刷字體非常適合用來做平面設(shè)計。收錄非常多的漢字字型！
授權(quán)出處：
http://www.asahi-net.or.jp/
臺灣明體cwTeXMing是一款舊字形外觀，在一定程度上仿照古籍〈康熙字典〉字體，字形構(gòu)架 穩(wěn)固，莊重而大方，適用於古籍文獻(xiàn)印刷。
授權(quán)出處：
https://github.com/google/fonts/tree/master/ofl/cwtexming
免費(fèi)字體：全字庫說文解字、全字庫正宋體、全字庫正楷體
授權(quán)出處：
http://www.cns11643.gov.tw/AIDB/copyright.do
中原大學(xué)數(shù)學(xué)系王漢宗教授所研發(fā)，王漢宗教授先分別在2000年和2004年先后捐出十套 WCL系列字型和32套新字型，但是由于字形與漢儀字庫有大量重復(fù)，因此存在各種版權(quán)糾紛，我們挑出了幾款沒有版權(quán)糾紛的字體。
免費(fèi)字體：王漢宗標(biāo)楷體空心、王漢宗波卡體空陰、王漢宗波浪體、王漢宗超黑俏皮動物、王漢宗超明體、王漢宗粗鋼體標(biāo)準(zhǔn)、王漢宗粗黑體實陰、王漢宗粗圓體雙空、王漢宗仿宋標(biāo)準(zhǔn)、王漢宗鋼筆行楷、王漢宗海報體半天水、王漢宗特黑體、王漢宗特明體標(biāo)準(zhǔn)、王漢宗細(xì)黑體、王漢宗細(xì)新宋簡體、王漢宗顏楷體、王漢宗中魏碑簡體
授權(quán)出處：https://zh.wikipedia.org/wiki/%E7%8E%8B%E6%BC%A2%E5%AE%97%E8%87%AA%E7%94%B1%E5%AD%97%E5%9E%8B
由臺灣教育部制作，這三款都是繁體字，并不支持簡體。
免費(fèi)字體：臺灣教育部標(biāo)準(zhǔn)楷書、臺灣教育部標(biāo)準(zhǔn)宋體、臺灣教育部國字隸書
授權(quán)出處：http://depart.moe.edu.tw/ED2400/News.aspxn=8940E5C0456177C3&sms=893AAA1CBFE149DE
該字體庫在中文字體界是比較稍有的免費(fèi)開源項目之一，有著豐富的文字收錄量，并且用戶可以進(jìn)行商業(yè)用途，非常方便
免費(fèi)字體：文泉驛正黑體、文泉驛微米黑、文泉驛等寬正黑
授權(quán)出處：
http://wenq.org/wqy2/index.cgi?FontGuide
為瀨戶制作的免費(fèi)字體，字體包含中文繁體常用字及多國語言。
授權(quán)出處：
https://www.justfont.com/fontdetail/147
作者Anonymous，自己手寫的一款字體手書體，此次共做了基本漢字6763個
授權(quán)出處：
https://www.zcool.com.cn/work/ZMjI2MDk1MDg=.html
是字體視界團(tuán)隊2018年創(chuàng)作的一款字體，推出半年來一直廣受設(shè)計師喜愛。現(xiàn)由包圖網(wǎng)與字體視界合作，包圖小白體， 定義為一款簡單可愛的創(chuàng)意字體。在字形筆畫上去除了折筆的弧形，換之以平直的筆畫，豎彎鉤轉(zhuǎn)為豎折，同時弱化了鉤筆畫，省去了許多筆畫末尾的小尾巴，顯得更加直白可愛。粗短的筆畫，像柯基的小短腿，相比細(xì)長的字體能給人更多的輕松感。整體形態(tài)采用了鏤空的制作技巧，增強(qiáng)了字體的立體感，適合用于品牌標(biāo)志、海報、包裝、影視綜藝、游戲、漫畫等場景。
授權(quán)出處：
https://act.ibaotu.com/activity/1.html
聯(lián)盟起藝是本套字庫聯(lián)名的平臺，故名：聯(lián)盟起藝盧帥正銳黑，聯(lián)盟起義盧帥正銳黑體正式發(fā)布，共計8000余字永久免費(fèi)商用標(biāo)題體！
授權(quán)出處：
https://www.zcool.com.cn/work/ZMzUxMzUzNzY=.html
日本Smartfont免費(fèi)商用字體，包含中日雙語！雖然中文字體不怎么好看，但可以使用日本字搭配裝飾用！
授權(quán)出處：
https://www.flopdesign.com/freefont/smartfont.html
日本KanjyukuGothic免費(fèi)商用字體，包含中日雙語！
授權(quán)出處：
https://www.flopdesign.com/freefont/kanjyukugothic-freefont.html
日本FLOPDESIGN-FONT免費(fèi)商用字體，包含中日雙語！
授權(quán)出處：
https://www.flopdesign.com/freefont/kanjyukugothic-freefont.html
海德堡大學(xué)漢學(xué)系推出的中文字型。包含了漢鼎繁古印、漢鼎繁海報、漢鼎繁舒體、漢鼎繁印篆、漢鼎繁中變、漢鼎繁顏體、漢鼎簡黑變、漢鼎簡楷體、漢鼎簡錄變、漢鼎簡舒體、漢鼎繁中變、漢鼎特粗黑、漢鼎繁中楷、漢鼎簡中楷、漢鼎繁琥珀、漢鼎繁勘亭、漢鼎繁特粗宋共十七種字型。
核實方式：
http://www.uni-heidelberg.de/impressum.html
這套「清松手寫體」是由游清松建立，主要是以原子筆在稿紙上手寫，字體結(jié)構(gòu)看起來相當(dāng)平衡，目前也已經(jīng)完成前兩套字型，清松手寫體也很適合用在手機(jī)或平板電腦。
免費(fèi)但限使用平臺
18款漢儀字體（僅可以京東平臺在免費(fèi)使用）：漢儀中黑(簡/繁)、漢儀細(xì)簡黑(簡)、漢儀中簡黑(簡)、漢儀楷體(簡/繁)、漢儀書宋一(簡)、漢儀書宋二(繁)、漢儀粗仿宋(簡)、漢儀水滴體(簡/繁)、漢儀珍珠隸(簡/繁)
授權(quán)出處：
http://fw.jd.com/449421.html?itemCode=FW_GOODS-449421-1
45款華康字體（僅可以阿里平臺在免費(fèi)使用）：華康布丁體、華康彩帶體 、華康兒風(fēng)體、華康方圓體、華康鋼筆體、華康海報體、華康手札體、華康手札體、華康翩翩體、華康黑體 、華康金文體、華康楷體、華康勘亭流、華康儷金黑、華康隸書體、華康龍門石碑、華康墨字體、華康POP1體、華康POP2體、華康POP3體、華康少女文字、華康飾藝體、華康瘦金體、華康標(biāo)題宋、華康宋體、華康唐風(fēng)隸、華康娃娃體、華康魏碑、華康正顏楷體、華康雅宋體、華康雅藝體、華康圓體、華康新綜藝體
授權(quán)出處：
https://www.dynacw.com.cn/news/news_detail.aspx?s=7
是漢儀字庫聯(lián)手阿里巴巴打造的第一款A(yù)I字體產(chǎn)品，漢智能黑體基于黑體的橫豎基本特征，加大橫豎粗細(xì)比例，字面飽滿填充整個內(nèi)框，讓字體更加醒目，視覺沖擊力極強(qiáng)，能夠很好的與用戶對話，非常適用于電商類廣告設(shè)計。當(dāng)然，這個字體僅限阿里巴巴平臺上使用。
授權(quán)出處：
https://mp.weixin.qq.com/s/Y_c_0COqWnUo90G3QJ2ojA
有了這些字體，媽媽再也不擔(dān)心我字體侵權(quán)罰款了~~
1、首先【關(guān)注】千千素材庫
2、然后【留言：領(lǐng)取免費(fèi)可商用字體】；或【轉(zhuǎn)發(fā)本篇文章】
3、最后主頁【私信】小編，全部免費(fèi)贈送
我是@千千素材庫：免費(fèi)分享最新精選的插畫設(shè)計教程、素材資源干貨，喜歡我的文章請點(diǎn)贊、關(guān)注、轉(zhuǎn)發(fā)、歡迎大家關(guān)注！
體在網(wǎng)站中扮演了相對重要的一個角色，所以在網(wǎng)站中，選用什么樣的字體也是一個相對比較重要的工作。今天跟大家分享下在網(wǎng)站當(dāng)中常用的8款字體。
都知道，字體主要分為稱線字和無稱線字。其實細(xì)分的話還有等寬字體、夢幻字體和花體字。但今天我們主要針對常用的稱線字和非稱線字來講。
稱線字和非稱線字的區(qū)別可以看下圖：
可以看到左邊的中文和英文字屬于稱線字，右邊中文和英文屬于非稱線字。稱線字指的是在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會有所不同。比如我們常用的宋體，觀察比劃可以看到橫細(xì)豎粗的特點(diǎn)，這就是典型的稱線字。非稱線字也叫無稱線字，無襯線字體沒有這些額外的裝飾，而且筆畫的粗細(xì)差不多。比如微軟雅黑。
稱線字體容易識別，它強(qiáng)調(diào)了每個字母筆畫的開始和結(jié)束，因此易讀性比較高，非稱線字則比較醒目。所以，在使用的過程中需要根據(jù)網(wǎng)站的定位而選擇相應(yīng)的字體。
下面簡單給大家介紹網(wǎng)頁中常用的幾種字體：
1、微軟雅黑
Vista之后新引入的字體，這個字體的使用率不用說了，可以說是web里面最安全的一個字體。字體方正、簡潔，被廣泛使用。
上海大眾這個網(wǎng)站默認(rèn)的首選字體就是微軟雅黑，整體比較簡潔。
2、黑體
黑體字和微軟雅黑差不多，作為非稱線字中的一種，一樣具備方正、簡潔、醒目的特點(diǎn)。這樣的字體特別適合當(dāng)標(biāo)題。其實黑體在使用上沒有微軟雅黑來得清晰明亮，一般在微軟雅黑和黑體的選擇下，個人更傾向微軟雅黑。
佳能的官網(wǎng)默認(rèn)首選的字體就是黑體，字體簡潔醒目。
3、華文細(xì)黑
華文細(xì)黑是Mac下的默認(rèn)中文，這套字體跟前面的微軟雅黑相比較，更顯絹細(xì)、秀氣。筆劃細(xì)節(jié)比微軟雅黑處理的多一些，所以整體給人比較精致的感覺。注意一下，華文細(xì)黑并不是所有電腦的自帶字體，當(dāng)網(wǎng)站文字用到這個字體的時候，是需要在自己電腦上下載這套字體的。除此，在寫css代碼的時候，font-family應(yīng)該設(shè)置的選擇性多一下，以保證界面打開的最佳效果。
這個字體就不給大家做展示效果了，因為這個不是系統(tǒng)的默認(rèn)字體，電腦上沒有安裝這個字體的也看不到網(wǎng)頁的原始效果。
4、中易宋體
前面介紹的三款字體都是非稱線字，接著要介紹的是稱線字體——中易宋體，簡稱宋體。宋體在我們的日常中使用范圍也很廣，這是電腦自帶的其中一種字體。宋體是為適應(yīng)印刷術(shù)而出現(xiàn)的一種漢字字體。筆劃有粗細(xì)變化，常用于書籍、雜志、報紙印刷的正文排版，所以在大篇幅文章的設(shè)計時，可以采用宋體。這個字體是Windows系統(tǒng)下最常見的字體，小字體點(diǎn)陣，大字體TrueType。大標(biāo)題顯示時字體不是很好看，所以一般不建議用宋體來當(dāng)標(biāo)題。
上海漢路律師事務(wù)所的網(wǎng)站就是采用了宋體字，這種字體的選擇一般出現(xiàn)在一些個性比較強(qiáng)的網(wǎng)站中，傳統(tǒng)、專業(yè)、公正、官方、權(quán)威，宋體就表現(xiàn)了這種特點(diǎn)。
5、 Arial
說到Arial，這套字體是微軟公司網(wǎng)頁核心字體之一，最常用的sans serif字體，當(dāng)字號很小時不容易閱讀。但是，大寫的“I”和小寫的“l(fā)”是無法區(qū)別的，所以一般可以考慮用Tahoma字體來替代。這套字體方正、不花巧、方便閱讀和印刷清晰。使用范圍也是特別的廣泛。但是要知道的是，蘋果系統(tǒng)下是沒有這套字體的，蘋果系統(tǒng)下默認(rèn)的是Helvetica。
可以看下禪道項目管理軟件的英文網(wǎng)站，幻燈片采用的字體就是Arial，可以看下這套字體在幻燈片下粗細(xì)的組合形態(tài)。
6、Tahoma
Tahoma是英文Windows操作系統(tǒng)的默認(rèn)字體，這個字體比較均衡，是種非常圓滑的字體。這個字體和中文混排顯示時，不會出現(xiàn)中英文不對齊的狀態(tài)。這套字體解決了Arial大寫“I”與小寫“l(fā)”難以分辨的問題。也相當(dāng)于在Arial上優(yōu)化了不少。除此，細(xì)看這套字體，可以發(fā)現(xiàn)其實在一些筆劃的處理上還是很精致的。
zui前端框架網(wǎng)站，英文字體的設(shè)置上也用到了這個字體，雖然不是第一優(yōu)先選擇，但是可以看出Tahoma這套字體的使用率也是很高的。
7、Helvetica
說到Helvetica這套字體，應(yīng)該是設(shè)計師們的最愛了吧。這套字體屬于 Realist風(fēng)格，擁有簡潔現(xiàn)代的線條，受到大部分設(shè)計師的追捧。這種字體給人一種簡單、現(xiàn)代化、休閑輕松的感覺。適用于扁平化設(shè)計，也適合搭配任何設(shè)計項目，包括banner、平面設(shè)計以及網(wǎng)頁字體等。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體，但在Windows下由于Hinting的原因顯示很糟糕。
這個字體主要體現(xiàn)在蘋果官網(wǎng)上，可以看下美國的官網(wǎng)。
8、Georgia
說到英文的稱線字，肯定首選是Georgia。這套字體筆劃粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細(xì)節(jié)還不錯。此種字體風(fēng)格優(yōu)雅又精致，可用于電影海報、游戲、時尚類網(wǎng)頁設(shè)計中。
林肯的官網(wǎng)，Georgia是官網(wǎng)的第二優(yōu)先選擇顯示的字體。網(wǎng)站比較現(xiàn)代，在一些幻燈片當(dāng)中結(jié)合了Georgia字體，稱線字和非稱線字的相結(jié)合，可以使得整個網(wǎng)站更生動。
在專業(yè)的網(wǎng)頁設(shè)計里，除了Banner圖、廣告語等特殊情況可能會用到特殊字體，網(wǎng)頁中使用的字體以不超過2種為準(zhǔn)，并且最好采用標(biāo)準(zhǔn)字體，比如中文的宋體、微軟雅黑，英文的Arial、Helvetica。只有使用這些系統(tǒng)自帶的字體，才能讓前端開發(fā)人員在排版時高程度地還原設(shè)計稿的文字效果。倘若使用了特殊字體，在設(shè)計font-family的時候，應(yīng)該多設(shè)置幾種字體的優(yōu)先順序，以確保網(wǎng)頁顯示的最佳效果。當(dāng)然，我們一般情況下建議使用系統(tǒng)自帶的字體。
以上8種網(wǎng)站中常用的字體介紹和示例，希望可以對大家有所幫助。
注意：部分字體使用過程中涉及商業(yè)版權(quán)，請慎重選擇。
介紹
今天福哥要跟跟大家說一說標(biāo)簽的樣式，上一課我們學(xué)習(xí)的標(biāo)簽的樣子就是它們的“默認(rèn)”樣子，實話實說這簡直太難看了！為了讓它們看起來更漂亮，為了可以使用這些標(biāo)簽勾勒出互聯(lián)網(wǎng)上我們看到的那些美輪美奐的網(wǎng)頁，我們需要通過標(biāo)簽樣式對它們進(jìn)行換裝、進(jìn)行美化。
使用標(biāo)簽樣式的語法，示例：我們給一個div設(shè)置邊框和背景顏色。
<div style="border: 1px solid #000; background: #ccc;"></div>尺寸
可以使用width和height控制對象的寬度和高度，可以使用百分比也可以使用具體的數(shù)值。
width
height
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
">
</div>邊框
邊框指的是標(biāo)簽在網(wǎng)頁顯示的對象的邊框，控制邊框可以使用border這個樣式。還可以控制對象邊框的圓角。還可以單獨(dú)控制對象的上下左右四個方向的邊框的樣式。
border
border-radius
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
">
</div>邊距
對象邊距分為內(nèi)邊距和外邊距。
內(nèi)邊距
內(nèi)邊距指對象里面的子元素距離對象邊框的距離，使用padding樣式控制對象的內(nèi)邊距。
padding
外邊距
外邊距指對象邊框距離父元素邊框的距離，使用margin樣式控制對象的外邊距。
margin
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
">
福哥教我學(xué)HTML樣式
</div>背景
背景是指對象區(qū)域內(nèi)的樣式，背景可以是一種顏色的填充，也可以是一張圖片的渲染。
background
background-color
background-image
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
">
福哥教我學(xué)HTML樣式
</div>字體
字體是用來控制文字的樣式的，可以控制文字的字體和字號。但是要注意一點(diǎn)，給文字設(shè)置字體一定要客戶端的電腦上有這種字體才可以正常顯示。
font
font-family
font-size
color
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
font-family: 黑體;
font-size: 22px;
color: #c85e7c;
">
福哥教我學(xué)HTML樣式
</div>顯示
對象的顯示方式也有很多種，有獨(dú)占一行的，也有只占一小塊的，還有非快狀的。顯示方式使用display屬性控制。
display: block
獨(dú)占一行
display: inline-block
獨(dú)占一小塊
display: inline
非塊狀
display: none
隱藏對象，就是對象狀態(tài)不可見也不占位置了
今天福哥給大家秀出了常用的標(biāo)簽樣式，同時給出了這個樣式的實際顯示效果。接下來我們就要使用這些知識來設(shè)計我們自己的頁面了。
把網(wǎng)頁上的基本元素都套上了漂亮的皮膚，可以使用這些漂亮的標(biāo)簽快速搭建好看的網(wǎng)頁，也是有捷徑可尋的。我們開發(fā)網(wǎng)站程序可以使用web框架輔助，那么設(shè)計漂亮的網(wǎng)頁也可以借助前端框架來完成。
下一課我們會跟大家介紹一款非常好用的前端框架——bootstrap，借助bootstrap前端框架就可以高效地設(shè)計網(wǎng)站的各種網(wǎng)頁了。
https://m.tongfu.net/home/35/blog/512895.html
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
