413款免費可商用字體，免費領取！再也不怕字體侵權

公舉曾經分享過

355款免費商用字體

今天更新了這批資料，新增了58款字體

Arual、阿里巴巴普惠體、裝甲明朝體等

總共413款免費商用字體

給大家免費下載使用

適用于

公眾號作圖、店鋪產品、印刷設計各種場景

堪稱史上最全

現在免費下載

立即免費使用

再也不怕字體侵權

免費領取方式

發送消息：字體

不需要轉發，關注后直接打開下載

接下來看看有哪些字體吧

Font Space（39款）

FontSpace是互聯網上最大的合法授權免費字體集合站點，該網站所有的字體都是由用戶自己上傳的。

小公舉整理出了其中39款免費商用字體，大部分都比較簡潔，適合正文內頁顯示，還有小部分適合作為標題。

官網地址：

http://www.fontspace.com

阿里巴巴普惠體（16款）

阿里巴巴自己舉辦的2019阿里巴巴UCAN設計大會上，發布了一款“阿里巴巴普惠體”，該字體對于個人或企業都是永久免費商用。

授權出處：

https://alibabafont.taobao.com

arual

這款字體線條比較細膩，構造簡潔，適用于各個行業的產品圖片。

授權出處：

http://www.dafont.com/font.php?file=arual

阿里智能漢儀黑體

阿里智能漢儀黑體是漢儀字庫聯手阿里巴巴打造的首款AI字體產品。

漢智能黑體基于黑體的橫豎基本特征，加大橫豎粗細比例，字面飽滿填充整個內框，讓字體更加醒目，視覺沖擊力極強，能夠很好的與用戶對話，適用于電商類廣告設計。

不過，遺憾的是，該字體僅限在阿里巴巴平臺上使用。

授權出處：

http://www.hanyi.com.cn/productdetail.php?id=2947

裝甲明朝體

裝甲明朝體是日本網友以思源宋體為基礎，修改后開放免費下載的新字型。

字體更適用于軍事或偏向陽剛的設計。

官網地址（不過目前已打不開）：

http://www.flopdesign.com/blog/font/5228/

思源系列（70款）

授權出處：

https://www.google.com/get/noto/

Fandol系列（8款）

堪比微軟雅黑的字體！超級適用于封面圖片！

他們家最經典最好用的就是破產字體，聽名字就知道，是來自一家破產的字體公司，現在開源了......

授權出處：

https://github.com/zenozeng/Free-Chinese-Fonts/issues/13

明朝明體系列（42款）

基于思源宋體修改而成的新字體，總共有42款字體，出自日本字體愛好者。

臺灣明體cwTeXMing是一款舊字形外觀、Big5編碼字型，在一定程度上仿照古籍〈康熙字典〉字體，字形構架穩固，莊重而大方，適用于古籍文獻印刷。

方正系列（4款）

包括四種字體：方正黑體、方正書宋、方正仿宋、方正楷體。

使用需經過方正書面授權。

授權出處：

http://www.foundertype.com/index.php/About/bookAuth/key/my_sysq.html

Droid Sans Fallback字體

和微軟雅黑相似的字體，是Android設備初期時默認的中文字體，由谷歌委托臺灣華康科技設計。

授權出處：

https://code.google.com/archive/p/droid-sans-mono-py/

站酷系列（4款）

授權出處：

http://www.zcool.com.cn/special/zcoolfonts/

龐門正道標題體增強版（1款）

適用于封面圖片標題，很醒目。

授權出處：

https://mp.weixin.qq.com/s/BGXeAXrEo6CM5-gtdQOuYA

漢鼎字庫(100款)

風格比較小清晰，適合產品圖片設計，據說已經倒閉了......

全字庫（3款）

美觀度非常高的楷體字，由臺灣地區的行政機關開發并維護。

官網出處：

http://cns11643.gov.tw/

文泉驛字體

感覺適合小標題、注釋

授權出處：

http://wenq.org/wqy2/index.cgi?FontGuide

手書中文簡體

基本漢字6763個，字體風格為手寫風格，可以用于slogan、banner、海報、商標等設計里面。

授權出處：

https://www.zcool.com.cn/work/ZMjI2MDk1MDg=.html

沐瑤軟筆手寫體

這種書寫方式可以把字寫得較為可愛，也算是一種更加手寫化的廣告字體。

授權出處：

https://www.zcool.com.cn/work/ZMjg5MjAwMDQ=.html

銳字真言體

真言體筆觸渾厚有力，筆畫曲折有度，字形個性鮮明，剛柔并濟，落筆簡潔有序，給人以遒勁有力、端正凝練的感受。直角與圓角的錯落搭配使得字體婉轉有度，落落大方，具有自己獨到的風格。

適合標題設計、畫冊設計、海報設計等場合使用。

官網地址：

http://reeji.com/

由于字體太多就不一個個展示了

免費領取方式

識別關注二維碼

發送消息：字體

不需要轉發，關注后直接打開下載

安裝方式

解壓字體壓縮包

找到控制面板中的字體文件夾

把字體文件拷貝到文件夾中

或者打開字體文件直接安裝

溫馨提示：

本次分享系小公舉個人分享行為，非商業行為。大多數字體有授權出處，小部分無授權出處字體（包括但不僅限于倒閉等），大家需要自行鑒定授權出處再使用。

設置星標，第一時間閱讀干貨

SS字體、文本樣式屬性

1、字體屬性

CSS-Fonts（字體）屬性用于定義字體系列、大小、粗細、和文字樣式（如斜體）。

1.1、修改字體樣式屬性

CSS使用 font-family屬性來定義字體

語法：

p {
 font-family：‘宋體’;
}

多種字體之間必須使用英文狀態下的逗號隔開。
一般情況下，如果有空格隔開多個單詞組成的字體，加引號。
盡量使用系統默認自帶字體，保證在任何用戶的瀏覽器都可以顯示。

1.2、字體大小屬性

CSS使用 font-size屬性來定義字體

語法：

p {
	font-size: 20px;
}

px（像素）大小是頁面常用單位
可以給body指定大小。

1.3、字體粗細屬性

CSS使用 font-weight屬性來定義字體粗細。

加粗是700或者bold 不加粗是normal或者400 數字不能跟單位。
一般用的是數字定義字體的粗細，比較的方便。

p {
	font-weight=700;
}

1.4、字體樣式屬性

CSS使用 font-style屬性來定義字體是否傾斜。

p {
	font-style: normal; //不傾斜
}

normal 默認值，不傾斜。
italic 傾斜字體

1.5、字體復合屬性

字體復合屬性(簡寫)font可以把以上文字的樣式綜合來寫，可以節約代碼。

字體復合屬性必須按照font: font-stylt(字體是否傾斜) font-weight（字體粗細）font-size/line-height（字體大小/行高）font-family（哪種字體）的順序。
必須嚴格按照順序書寫，不能更換順序，并且各個屬性之間用空格隔開。
不需要設置的屬性可以省略，但是字體大小和何種字體不能省略

p {
	?font: italic 700 16px 'Microsoft yahei';
}

2、文本外觀屬性

CSS Text（文本）屬性可以定義文本的外觀，比如文本的顏色，對齊文本，裝飾文本，文本縮進，行間距等。

2.1、文本顏色

corder屬性：定義文本的顏色。

div {
	corder：red;
}

表示方式屬性值預定義顏色值red，green，blue，pink十六進制#FF0000，#FF66000，#29D794RGB代碼rgb(255,0,0)或（100%，0%，0%）

開發者最常用的是十六進制。

2.2、對齊方式

text-align屬性用于設置元素內文本內容的水平對齊方式。

div {
	text-align：center;
}

屬性樣式left左對齊（默認值）right右對齊center居中

2.3、裝飾文本

text-decoration屬性規定添加到文本的修飾。可以給文本添加下劃線，刪除線，上劃線。

a {
	text-decoration: none; //取消a默認的下劃線
}

屬性值樣式none默認無裝飾線underline下劃線。overline上劃線（幾乎不用）line-through刪除線（不常用）

一般用于刪除a標簽默認的下劃線

2.4、文本縮進

text-indent屬性用來指定文本的第一行的縮進，通常是將段落首行縮進。

div {
	text-indent: 10px;
}

通過該屬性，可以讓元素的第一行都縮進一定的長度。

p {
	text-indent: 2em;
}

em是一個相對單位，就是當前元素的1個文字的大小，如果當前元素沒有設置大小，則會按照父元素的1個文字大小。

2.5、行間距

line-height屬性用于設置行間的距離（行高），可以控制文字行與行之間的距離。

過前面幾篇文章的介紹，相信大家對css層疊樣式表已經有了大概的了解和認識了，最起碼要知道它到底是做什么用的。也就是所謂的應用場景，光是學會，但是不知道怎么使用，那相當于沒學。

這里再次說明css的作用就是給html標簽指定樣式的，不論是淘寶還是京東再或者是其他的網站都是用html+css+JavaScript來實現界面的，界面就是讓用戶能看得見摸得著的東西，通過界面就可以查看商品、瀏覽商品、選購商品，最終完成交易，賺到錢。所以說html、css、JavaScript是學習編程的基礎。

廢話不多說，開始今天的內容。css選擇器可以讓我們定位hmtl標簽，只有定位到html標簽，我們才能給html標簽指定樣式。樣式的大小怎么設置，就需要我們對css的度量單位有所了解。就和你上街買菜一樣，你光說要買白菜，賣菜的肯定會問你，買多少啊？如果你不告訴賣菜的你要買多少，那賣菜的應該賣給你多少呢？

css的度量單位就是解決這里多少的問題。

ok，了解了以上內容，接著我們再來了解，css的都有哪些樣式，具體應該怎么使用。

文本樣式，什么是文本呢？就是文字啊。現在想一想文字可以有哪些樣式呢？

這不禁讓我想起一個故事：兩個人因為某件事情，爭論不下。所以決定用比文（相對于比武）的方式來論輸贏，做決定。其中有一題便是：怎么用黑筆寫出紅字來？（大家可以思考一下）

這里說的黑、紅就是顏色，html里面的文本也就是文字可以有顏色，還可以有大小，還可以有粗細、還可以有傾斜、還可以在文字下面畫一個橫線叫下劃線、還可以在中間畫一道線叫刪除線、還可以設置字體樣式：像宋體、楷體、微軟雅黑等等...（盡情發揮你的想象，看看文本還可以有哪些樣式吧）

1.顏色

css給文本設置顏色通過：color來指定。前面幾篇中我用了大量的color來指定html標簽的顏色。

具體演示，看代碼：（我們給p標簽里面的文本設置紅顏色）

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p{
      color: red;
    }
</style>
</head>
<body>
  <p>第一段落</p>
</body>
</html>

頁面效果：

這里只有一個p標簽，所以我們利用元素選擇器可以很好地定位到p標簽，如果我們有很多p標簽，而你想給每個p標簽設置不同的顏色該怎么做呢？（如果想不起來的同學，可以返回去看看css選擇器）

我們可以通過偽類選擇器進行精確地指定第一個第二個第三個，分別給他們指定不同的顏色。當然，你也可以使用id選擇器或者類選擇來精確定位。

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p:last-child{
      color: red;
    }
    p:first-child{
      color:lime;
    }
    p:nth-child(2){
      color: navy;
    }
</style>
</head>
<body>
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
</body>
</html>

頁面效果：

2.文字大小

文字的大小通過font-size來指定

將第三個（也就是最后一個）p的文本大小設置為50px（px為css的度量單位，還不知道px是什么的同學，可以返回去看看css度量單位那一篇）

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p:last-child{
      font-size: 50px;
      color: red;
    }
    p:first-child{
      color:lime;
    }
    p:nth-child(2){
      color: navy;
    }
</style>
</head>
<body>
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
</body>
</html>

頁面效果：

這里再啰嗦一句，css叫層疊樣式表，層疊的意思就是可以把很多樣式疊加作用在一個html標簽上，來達到樣式的豐富多彩。這里我們不僅給最后一個p設置了紅色還把字號變成了50px，下面的例子中，我們可以一直往上疊加更多樣式。

3.文本傾斜

文本是否傾斜通過font-style來設置

將第三個p標簽的文本傾斜

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p:last-child{
      font-size: 50px;
      color: red;
      font-style: oblique;
    }
    p:first-child{
      color:lime;
    }
    p:nth-child(2){
      color: navy;
    }
</style>
</head>
<body>
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
</body>
</html>

頁面效果：

下面給出一個表格：

值	說明
normal	表示讓傾斜狀態恢復到正常狀態
italic	表示使用斜體
oblique	表示讓文字傾斜。區別在沒有斜體時使用

4.字體加粗

設置字體是否加粗。

通過font-weight來設置

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p:last-child{
      font-size: 50px;
      color: red;
      font-style: oblique;
      font-weight: bold;
    }
    p:first-child{
      color:lime;
    }
    p:nth-child(2){
      color: navy;
    }
</style>
</head>
<body>
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
</body>
</html>

頁面效果：

值	說明
normal	表示讓加粗的字體恢復正常
bold	粗體
bolder	更粗的字體
lighter	輕細的字體
100~900之間的數字	600及之后是加粗，之前不加粗

在目前計算機和瀏覽器顯示中，只有bold加粗，其他更粗更細，目前體現不出來。

5.文本字體設置

通過font-family來設置

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p:last-child{
      font-size: 50px;
      color: red;
      font-style: oblique;
      font-weight: bold;
      font-family: 宋體;
    }
    p:first-child{
      color:lime;
    }
    p:nth-child(2){
      color: navy;
    }
</style>
</head>
<body>
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
</body>
</html>

頁面效果：

好了，今天的內容就是這么多了。每天學習一點點，日積月累，你會發現你已經完全掌握編程了。記住要多動手練習。

在線咨詢

上一篇：vue爬坑記之動態菜單&動態路由
下一篇：Calendarique for Mac(增強型日歷

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

413款免費可商用字體，免費領取！再也不怕字體侵權

SS字體、文本樣式屬性

1、字體屬性

1.1、修改字體樣式屬性

語法：

1.2、字體大小屬性

1.3、字體粗細屬性

1.4、字體樣式屬性

1.5、字體復合屬性

2、文本外觀屬性

2.1、文本顏色

2.2、對齊方式

2.3、裝飾文本

2.4、文本縮進

2.5、行間距

您的項目需求