首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS font-family 属性设置字体

前言 ---- font-family 属性用于给元素指定字体,是开发中使用非常频繁的一个属性 该属性的值是一个字体系列,每个值使用逗号隔开,如果字体名名称包含空格,那么字体名称必须使用引号包裹,设置的字体是否可用取决于用户机器上该字体是否可用...给英文,中文设置不同的字体 ---- 众所周知,font-family 属性的原则是客户端不支持前面的字体时,自动往后查找可以使用的字体 如果想要给英文,中文设置不同的字体,可以使用一个仅支持的英文的字体...如下所示: 遇到文字时,首选会尝试使用 Arial 字体,该字体支持英文,所以遇到英文会生效,遇到中文时 Arial 不支持,将自动使用后面的 Noto Sans SC(思源黑体) 字体 :root { font-family...Noto Sans SC 大小: 100,300,400,500,700,900 C:100,300,400,500,700,900"> 在需要使用思源黑体的地方使用 CSS 设置字体 font-family

2.6K20

CSS Trick】font-family 继承失效了?

CSS 继承 从 MDN 上可以看到,当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值(computed value) 比如 color 属性就是继承属性...CSS 属性 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...,计算值的结果还是 test(这里猜测因为 font-family 可以通过 @font-face 自定义设置,所以浏览器无法知道它是无效的),但实际上效果已经直接降级到浏览器的值了,而不是父级元素设置的值

66520
您找到你想要的搜索结果了吗?
是的
没有找到

CSS】955- 你该知道的字体 font-family

关于字体的基础知识,建议先看看这篇 你该知道的字体 font-family[5] font-family 关键字 对于 CSS 中的 font-family 而言,它有两类取值。...一类是类似这样的具体的字体族名定义font-family: Arial 这里定义了一个具体的字体样式,字体族名为 Arial; 一类是通用字体族名,它表示一大类字体(并非单个),类似这样:font-family...以 CSS-Tricks[9] 网站的 font-family 定义为例子: { font-family: system-ui,-apple-system,BlinkMacSystemFont...字体定义规则建议 结合 你该知道的字体 font-family[10] 最后给出的规则建议,加上本文对各系统默认字体的介绍及最新的字体定义推荐,给出现阶段字体定义规则的建议如下: 1、尽量使用系统默认字体...://caniuse.com/#search=system [9] CSS-Tricks: https://css-tricks.com/ [10] 你该知道的字体 font-family: https

4K20

如何CSS中自定义鼠标样式

前言 想着美化下自己的个人部落格,那就先从鼠标样式开始美化吧,默认的鼠标样式有点单调,那应该如何美化呢?...把喜欢的鼠标样式下载到本地,然后上传到网站目录下,比如图片存放目录或者主题images的文件夹中(鼠标样式存储样式可以随意,不限制) 3、站长这边以本站博客为例,进入博客后台主题设置 >> 首页设置 >> 自定义...CSS >> 填写如下CSS(其他博客或者网站自行修改style.css样式表即可) CSS /*鼠标样式开始*/ /*鼠标指针样式*/ body{cursor:url(/zb_users/upload...zb_users/upload/img/link.cur),pointer;} /*鼠标样式结束*/ 注意鼠标样式路径修改为刚刚上传的存放目录路径 4、清空浏览器缓存(如有CDN,则更新CDNstyle.css

2.2K20

谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

字体定义的细节 其他一些小细节也很重要,譬如定义字体的时候,何时需要在字体两端添加引号?...字体定义顺序 字体定义顺序是一门学问,通常而言,我们定义字体的时候,会定义多个字体或字体系列。...嗯,其实上面的 font-family 就是淘宝首页 body 的字体定义,非常的规范,每一个字体的定义都有它的意义。 ?...字体书写规则 综上,总结一下,我觉得字体 font-family 定义的原则大概遵循: 1、兼顾中西 中文或者西文(英文)都要考虑到。...例如 MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义 Windows 用户的中文字体。

1.1K30

CSSCSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )

文章目录 一、 字号大小设置 1、 语法简介 2、 代码示例 二、 字体设置 1、 语法简介 2、 Unicode 编码字体名称 3、 代码示例 一、 字号大小设置 ---- 1、 语法简介 在 CSS...推荐在 body 中设置 16 px ; Google 浏览器默认文字大小 16 像素 ; 2、 代码示例 代码示例 : 在开始处 , 先设置 body 标签下所有的文字为 16 px , 然后在后面定义...床前明月光 疑是地上霜 举头望明月 低头思故乡 执行效果 : 二、 字体设置 ---- 1、 语法简介 CSS...文字 字体设置语法 : p { font-family:"微软雅黑"; } 常见的字体 : 微软雅黑 , 默认字体 ; 宋体 黑体 如果 指定了多个字体 , 如下样式 , 优先使用前面的字体 ;...字体的 英文名称 中包含 空格 , # , $ 等字符 , 则必须加双引号 或 单引号 ; 使用系统的默认字体 , 不要使用不常见的字体 , 保证浏览器适配 ; 2、 Unicode 编码字体名称 在 CSS

2.7K20

如何使用 Tailwind CSS 设计高级自定义动画

Tailwind CSS,一款流行的实用型CSS框架,提供了一套强大的工具,可以轻松地创建令人惊艳的动画效果。...Transition 与 Transform Tailwind CSS 提供了一系列利用 CSS 过渡和变换的实用类。这些属性使您能够轻松创建平滑的动画和令人惊叹的变换效果,而无需花费太多的精力。...除了 transitions 和 transforms 之外,Tailwind CSS还支持关键帧动画。关键帧允许您通过在不同时间点指定一系列样式变化来定义定义动画。...结束 上述设计的动画展示了使用CSS和Tailwind CSS框架可以实现的多样性和创造力。这些示例展示了各种动画效果,如旋转、弹跳、脉动、翻转和摆动。...此外,Tailwind CSS 配置文件中的自定义定义关键帧的能力使得动画能力得以精细调整和扩展。这种灵活性赋予开发者创造独特且引人注目的效果,以满足其特定设计需求的能力。

1.1K20

MySQL:DDL 数据定义语句盘点

本篇内容包括:DDL 的简介、SHOW 查看语句、CREATE 创建语句、ALTER 修改语句以及 DROP 删除语句的使用。...一、DDL 简介 DDL(Data Definition Language),即数据定义语句,功能就是定义数据库DATabase、表table、索引index、视图view、列column等 常用关键字包括...show warnings; – 显示最后一个执行的语句所产生的错误、警告和通知。 show errors; – 只显示最后一个执行语句所产生的错误。...** ---- 三、CREATE 创建语句 1、定义数据库 create database db_name; 2、定义数据表、列 create table tb_name( //定义表 id int...(5), //定义列 name varchar(10) ); ---- 四、ALTER 修改语句 1、ADD 子句 增加表的字段 用来增加表的字段:ALTER TABLE table_name

55920

CSS样式表定义

1.通过HTML标签定义样式表 CSS样式表的基本语法如下: 引用样式的对象{标签属性:属性值;标签属性:属性值;…} (1)引用样式的对象:指的是需要引用该样式的HTML标签,可以是一个或多个标签...例如: #sample{font-family:宋体;font-size:60pt} 段落文本 ---- 3.使用class定义样式表 若要为同一元素创建不同的样式或为不同元素创建相同的样式...,可以使用CSS类。...CSS类有两种定义格式,定义时,在自定义类的名称前面加一个点号。 标签名.类名{标签属性:属性值;标签属性:属性值;…} 这种格式的类指明所定义的样式只能用在类名前所指定的标签上。...例如: .text{font-family:宋体;color:red;} 段落文本 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

74130

CSSCSS定义属性进阶使用(一)

进阶使用CSS定义属性 在之前一篇介绍CSS定义属性的文章中,我们介绍了什么是CSS定义属性,var()、calc()。...本篇文章中,为了进一步使用它,我们将介绍CSS定义属性的其他用法。 自定义原则 在传统的CSS中,通常我们需要写重复的属性值,而自定义原则能让我们避免这种情况。做到“一处定义,处处使用”。...在媒体查询中需要改变的只有自定义属性的值。 CSS 与 Javascript之间的桥梁:自定义属性 假设现在有一个容器元素,我们希望当用户点击它的时候可以移动到最后一位。...clickX', `${evt.clientX}px`); container.style.setProperty('--clickY', `${evt.clientY}px`); }); 上面,我们使用 CSS...使用自定义元素,明显比前文中的方案都好! 这样,CSS和JS分别独立实现样式和逻辑部分,维护起来更加容易。

19620
领券