百科狗-知识改变命运!
--

font-family - 设置使用的字体 - css 字体属性

乐乐1年前 (2023-11-21)阅读数 20#技术干货
文章标签字体

font-family

font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。

示例

/* 一个字体族名和一个通用字体族名 */
font-family: gill sans extrabold, sans-serif;
font-family: "goudy bookletter 1911", sans-serif;

/* 仅有一个通用字体族名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* 全局值 */
font-family: inherit;
font-family: initial;
font-family: unset;

浏览器支持

浏览器都支持font-family

语法:

font-family:family-name| generic-family
  • family-name:字体名称,按优先顺序排列,以逗号隔开,如果字体名称包含空格或中文,则应使用引号括起。一般字体引用可以不加引号,如果字体名包含了空格、数字或者符号(如连接符)则需加上引号,避免引发错误。
  • generic-family:字体序列名称。序列可包含嵌入字体。请参阅@font-face规则。useragent会遍历定义的字体序列,直到匹配到某个字体为止。例如:body{font-family: helvetica, verdana, sans-serif;}。如上字体定义,假设你机器上没有helvetica字体,但有verdana,这时将会以verdana显示你的文字。
  • 对应的脚本特性为fontFamily

取值:

  • family-name:一个字体族的名字。例如"Times"和"Helvetica"都是字体族名。字体族名可以包含空格,但包含空格时应该用引号。
  • generic-family:通用字体族名是一种备选机制,用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字,所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。以下是该属性可能的取值以及他们的定义。
    • serif:带衬线字体,笔画结尾有特殊的装饰线或衬线。例如:Lucida Bright,Lucida Fax,Palatino,"Palatino Linotype",Palladio,"URW Palladio",serif.
    • sans-serif:无衬线字体,即笔画结尾是平滑的字体。例如,"Open Sans","Fira Sans","Lucida Sans","Lucida Sans Unicode","Trebuchet MS","Liberation Sans","Nimbus Sans L",sans-serif.
    • monospace:等宽字体,即字体中每个字宽度相同。例如,"Fira Mono","DejaVu Sans Mono",Menlo,Consolas,"Liberation Mono",Monaco,"Lucida Console",monospace.
    • cursive:草书字体。这种字体有的有连笔,有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果,所以会给人一种手写的感觉。例如,"Brush Script MT","Brush Script Std","Lucida Calligraphy","Lucida Handwriting","Apple Chancery",cursive.
    • fantasy:主要是那些具有特殊艺术效果的字体。例如,Papyrus,Herculanum,Party LET,Curlz MT,Harrington,fantasy.
    • system-ui:从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异,这个通用选项 is provided for typefaces that don't map cleanly into the other generics.
    • math:针对显示数学相关字符的特殊样式问题而设计的字体:支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyph。
    • emoji:专门用于呈现 Emoji 表情符号的字体。
    • fangsong:一种汉字字体,介于宋体和楷体之间。这种字体常用于某些政府文件。

有效的字体族名

字体族名或者是引号包括的字符串,或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。

例如,以下的声明是有效的:

font-family: gill sans extrabold, sans-serif;
font-family: "goudy bookletter 1911", sans-serif;

font-family - 设置使用的字体 - css 字体属性

以下的声明是无效的

font-family: goudy bookletter 1911, sans-serif;
font-family: red/black, sans-serif;
font-family: "lucida" grande, sans-serif;
font-family: ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #pound, sans-serif;
font-family: hawaii 5-0, sans-serif;
默认值由useragent决定
适用于所有元素
继承性
动画性
计算值指定值

例子

一些通用字体

.serif {
  font-family: times, times new roman, georgia, serif;
}

.sansserif {
  font-family: verdana, arial, helvetica, sans-serif;
}

.monospace {
  font-family: lucida console, courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}
this is an example of a serif font.
this is an example of a sans-serif font.
this is an example of a monospace font.
this is an example of a cursive font.
this is an example of a fantasy font.
this is an example of a math font.
this is an example of an emoji font.
this is an example of a fangsong font.

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)