李涛自留地
回到顶部
首页 > 前端 > Css中Font-Family属性及用法 Font-Family如何设置字体

Css中Font-Family属性及用法 Font-Family如何设置字体

文章目录

Css中Font-Family是任何网站在设计前后端页面时，都必不可少的Css元素，从字意上来理解就是字体类型，通常我们直接在Html标签的body中来设置Font-Family的属性，以便达到来规定网站网页的字体类型，如果特殊区域需要另外设置字体类型，则直接在这块区域再另行规则字体类型即可。那么Font-Family这么重要，Font-Family有哪些属性？Font-Family又是如何来设置字体的呢？

Font-Family属性表格

属性值 作用
family-name 用于某个元素的字体族名称或/及类族名称的一个优先表
generic-family 默认值：取决于浏览器

一般在Css书写样式的时候，在Font-Family先写family-name属性，然后再写generic-family，写多个字体类型，以便前面指定的family-name属性中的字体不能使用的时候，后面generic-family属性中的浏览器字体可以取代generic-family属性中的字体。

Font-Family浏览器兼容性

Font-Family作为Css中必备的样式属性，从很早开始就被浏览器兼容，常用的谷歌、火狐、Edge、IE、OPera等第版本的都支持并兼容Font-Family。

Font-Family书写格式

body{Font-Family:fangsong, serif;}
Css中Font-Family属性及用法 Font-Family如何设置字体

1、可以设置多个字体类型，但是字体类型中间要用英文半角,隔开。

2、如果字体类型之间有空格的时候要要用英文半角"将字体包含其中。

Css中常用Font-Family字体类型表格

名称 说明
Helvetica 苹果系统支持的一种西文无衬线字体，是苹果生态中最常用的一套西文字体。
Arial 无衬线西文字体，表现形式和Helvetica类似，在不同系统的浏览器都支持，兼容性非常好。
Tahoma 一种无衬线字体，间距较小，在不同系统的浏览器都支持，兼容性良好。
San Francisco 苹果的一种无衬线字体，也是目前苹果系统的默认西文字体。
PingFang SC 苹果专为中国用户打造的一个中文无衬线字体，是苹果系统默认的中文字体。
Hiragino Sans GB 苹果系统中较早的中文无衬线字体。
Segoe UI windows系统下的一种无衬线西文字体，也是windows系统的默认西文字体。
Microsoft YaHei Windows系统默认的中文字体，也是一套无衬线字体。
宋体 中文衬线字体，windows 和 macOS都有支持，是windows XP及更早系统的默认中文字体。
WenQuanYi Micro Hei Linux系统下默认中文字体，一般为了兼容Linux系统才会设置这个字体。
fangsong 仿宋字体

以上通过Font-Family属性、Font-Family浏览器兼容性、Font-Family书写格式以及介绍的常用Font-Family字体类型几个方面对Css中的Font-Family做了一个简单的介绍和记载，Font-Family属性在前后端页面还是比较重要的，所以还是得重视这方面的知识，后续本站将继续记载和分享更多关于前端中Font的有关知识。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。