公举曾经分享过

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>

页面效果：

下面给出一个表格：

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>

页面效果：

在目前计算机和浏览器显示中，只有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>

页面效果：

好了，今天的内容就是这么多了。每天学习一点点，日积月累，你会发现你已经完全掌握编程了。记住要多动手练习。