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

设置具有多个粗细的单个css字体系列

CSS字体系列是用于定义网页中文本的字体样式的一组属性。它包括字体族名、字体样式、字体粗细和字体大小等属性。

  1. 字体族名(font-family):字体族名指定了字体的名称或字体族的名称。在CSS中,可以通过在字体族名列表中列出多个字体名称来设置字体的优先级顺序。如果用户计算机上没有第一个字体,则会尝试使用第二个字体,以此类推。常见的字体族名有:
  • Serif字体(衬线字体):具有额外的装饰线条,如Times New Roman、Georgia等。
  • Sans-serif字体(非衬线字体):没有额外的装饰线条,如Arial、Helvetica等。
  • Monospace字体(等宽字体):每个字符都占据相同的宽度,如Courier New、Consolas等。
  1. 字体样式(font-style):字体样式定义了字体的外观,包括斜体、正常和倾斜。常见的字体样式有:
  • Normal:正常字体样式。
  • Italic:斜体字体样式。
  • Oblique:倾斜字体样式。
  1. 字体粗细(font-weight):字体粗细定义了字体的粗细程度。常见的字体粗细有:
  • Normal:正常字体粗细。
  • Bold:粗体字体粗细。
  • Lighter:比正常字体细一些的字体粗细。
  1. 字体大小(font-size):字体大小定义了字体的尺寸。可以使用像素(px)、百分比(%)或其他单位来指定字体大小。

设置具有多个粗细的单个CSS字体系列可以通过以下方式实现:

代码语言:css
复制
font-family: Arial, sans-serif;
font-weight: 400, 700;

上述代码将字体系列设置为Arial字体,如果用户计算机上没有Arial字体,则使用sans-serif字体作为备选。同时,设置字体粗细为400和700,分别表示正常和粗体字体。

这样设置的字体系列可以在需要不同粗细的文本中使用,例如:

代码语言:html
复制
<p style="font-weight: 400;">这是正常粗细的文本。</p>
<p style="font-weight: 700;">这是粗体粗细的文本。</p>

在这个例子中,第一个段落使用正常粗细(400),第二个段落使用粗体粗细(700)。

腾讯云提供了丰富的云计算产品和服务,其中与字体相关的产品包括:

  • 腾讯云字体库:提供了丰富的中英文字体资源,可用于网页设计和开发中。
  • 腾讯云字体识别:通过OCR技术,识别图片中的文字内容,可用于字体相关的应用场景。

以上是关于设置具有多个粗细的单个CSS字体系列的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

文章目录 一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置...1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式代码 ② 使用综合字体样式代码 ③ 执行效果 一、 CSS 2.0手册使用...---- 1、 按照文档层次查找 CSS 使用方法可在 CSS 2.0 手册 中查询 ; 这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧 " 属性 | 字体 | font-weight...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; 在 CSS 中 , 可使用 font-weight 设置 字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式..., 可使用 font-style 设置 字体粗细 ; body { font-style:italic; } font-style 属性值设置 : normal : 默认没有斜体样式 ; italic

4.7K20

css基础第一弹

选择器是用于指定CSS样式HTML标签,花括号内是对该对象设置具体样式 属性和属性值以键值对形式出现 属性是对指定对象设置样式属性,例如字体大小、文本颜色等 属性和属性值之间用英文:分开 多个...,很多不需要 特殊情况使用 *{color:red;} 字体 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体) 字体系列 CSS 使用font-family...属性定义文本字体系列。...(chrome浏览器默认文字大小为16px),我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体粗细。...p { font-style: normal; } 属性值 描述 normal 默认值,显示标准字体样式 italic 浏览器会显示倾斜字体样式 字体复合属性 字体系列、大小、粗细、和文字样式

1.9K20
  • css基础第一弹

    选择器是用于指定CSS样式HTML标签,花括号内是对该对象设置具体样式 属性和属性值以键值对形式出现 属性是对指定对象设置样式属性,例如字体大小、文本颜色等 属性和属性值之间用英文:分开 多个...选择器分类 css选择器分为基础选择器和复合选择器两个大类,这里是基础选择器 基础选择器是由单个选择器组成。...,很多不需要 特殊情况使用 *{color:red;} 字体 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体) 字体系列 CSS 使用font-family...属性定义文本字体系列。...不同浏览器默认字体大小是不一样(chrome浏览器默认文字大小为16px),我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体粗细

    9810

    CSS基础03-CSS字体属性

    03-CSS字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文字样式(如斜体等)。 3.1字体系列 CSS使用font-family属性定义文本字体系列。... p { font-family: Arial, 'Microsoft Yahei', '微软雅黑'; } 各种字体之间必须使用英文逗号相隔 一般情况下,如果使用了由空格隔开多个单词组成字体...,需要加单引号 尽量使用系统默认自带字体,保证任何浏览器都能正确显示 常见集中字体:‘Microsoft Yahei’, Tahoma, Arial, ‘Hiragino Sans GB’ 当设置多个字体时...,根据先后顺序依次查看系统是否支持,若不支持则查看后一个,若全都不支持则使用系统默认字体显示 实际开发中,字体设置常用于标签来将整个页面中字体全部修改掉 3.2字体大小 CSS使用 font-size...,我们应尽量给一个明确值,而不要使用默认大小 同样可以通过给设置字号大小来指定整个页面文字大小(标题标签除外,需要单独设定) 3.3字体粗细 CSS使用 font-weight属性来设置字体粗细

    1.9K20

    CSS 基础 之 基础选择器+字体文本相关样式

    类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小 4.2 字体粗细 4.3 字体样式(是否倾斜) 4.4 字体系列 5、文本样式 5.1 文本缩进 5.2 文本水平对齐方式...类名可以重复,一个类选择器可以同时选中多个标签; 3.3 id选择器 结构 #id属性值 { css属性名:属性值; } ; 作用 通过id属性值,找到页面中带有这个id属性值标签,设置样式; 注意点...4.2 字体粗细 属性名 font-weight 取值 关键字: 正常——>normal 加粗 ——>bold纯数字:100~900整百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细...从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体 2. 如果都不支持,此时会根据操作系统,显示最后字体系列默认字体 注意点: 1. 如果字体名称中存在多个单词,推荐使用引号包裹 2....如果字体名称中存在多个单词,推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3.

    2.1K10

    突破限制,CSS font-variation 可变字体魅力

    scale 是等比例放大缩小一个物体,而仔细观察上述效果,明显是有字体粗细字体字宽变化。这里,其实用到了 CSS 比较新特性 -- 可变字体,也就是 font-variation。...(粗体+斜体) 等一系列字体文件。...当然,这个文件可能比常规单个字体文件大一些。...理解 font-variation-settings 除了直接通过 font-weight 去控制可变字体粗细CSS 还提供了一个新属性 font-variation-settings 去同时控制可变字体多个属性...那是因为 font-variation-settings 除了支持字体粗细变化外,还支持上述说注册轴设定多个样式属性变化,以及自定义轴一些字体样式属性变化。

    1.2K10

    『知识巩固#1』Html、Css基础整理

    、padding属性 字体和文本样式 字体 字体大小 font-size 浏览器有默认值 16px 字体粗细 font-weight 取值 关键字: 正常normal 加粗 blod 纯数字:...正常400 加粗 800 字体样式 font-style 字体是否倾斜 正常 normal 倾斜 italic 字体系列 font-family 雅黑、宋体、黑体之类 windows电脑 默认是微软雅黑...一般网页会提供多个字体,用逗号隔开,表示按顺序显示,避免出现用户电脑上没有安装字体情况 常见字体系列 无衬线字体 sans-serif 均匀 无笔锋 一般网页都用这种类型 衬线字体 serif 不均匀...,只有当选择器优先级相同时,才能通过层叠性判断结果 优先级 最复杂 css三大特性 优先级介绍 不同选择器具有不同优先级,优先级高选择器样式会夫噶优先级低样式 优先级公式 继承...官方联想模型为 苹果电脑包装盒,个人理解为箱装盒式牛奶 边框 简写为 bd后按tab键 border: 粗细 线条样式 颜色 不分先后顺序 MDN官网上线条样式如下 可拆分单个属性 border-width

    4K20

    从头学前端-CSS基础01

    : 12px,color:'red'}CSS基础选择器选择器就是根据不同需求把不同标签选出来;CSS就是找指定标签,设置标签样式;选择器分为基础选择器和复合选择器两大类;基础选择器又包括:标签选择器...,类选择器,id选择器和通配符选择器;标签选择器是指用html标签名称作为选择器,把某一类标签设置样式;不能对标签进行差异化设置类选择器可以单独选一个或多个标签,进行差异化设置;需要给标签设置class...属性;(不要使用纯数字,中文,标签名作为类名)使用时候,class前面加符号.语法如下:.类名{ k:v}一个标签页可以使用多个类名;在标签class属性中,写多个类名,以空格分开;id选择器是通过标签...Id属性值作为选择器,id以#开始;其他与类选择器类似;相比类选择器,id可以表示一个标签,id只能使用一次;通配符选择器使用*定义,它表示选取页面所有的元素;图片CSS字体属性字体属性用于定义字体系列...,大小,粗细和文字样式等;字体系列:font-family字体大小: font-size; 大小以px(像素)为单位;谷歌浏览器默认大小为16px; 一般情况下给body添加此属性;标题标签特殊设置字体粗细

    1.1K00

    前端学习 20220825

    --实际开发中使用CSS控制文本域宽度高度--> 默认占位文字 CSS代码风格 样式格式书写 紧凑格式 h3...更直观) h3 { color: pink; font-size: 20px; } 样式大小写 一般情况使用小写字母,特殊情况除外 空格规范 冒号后保留空格 选择器和大括号间保留空格 CSS...选择器作用 根据不同需求选择不同标签 选择器分类: 基础选择器(由单个选择器组成) 标签选择器(标签名):快速为页面中同类型标签统一设置样式,不能设计差异化样式 类选择器(.类名): 为页面中某一个或某几个标签统一设置样式...文字属性 字体系列(font-family) 各种字体之间使用英文逗号隔开 如果字体多个单词由空格隔开,需要加引号 尽量使用系统默认自带字体,保证在各种浏览器中都能正确显示 渲染时从前往后逐个查找系统是否安装该字体...字体大小(font-size) px是最常用单位 谷歌默认16px 不同浏览器默认字号大小不一致,尽量给一个明确值 标题标签比较特殊,需要单独指定大小 字体粗细(font-weight) normal

    9310

    网页|CSS字体介绍

    除了上一节我们讲到背景以外,字体也是一个我们最常用到属性,接下来我们就来讲一讲CSS字体CSS字体(font)属性定义文本中字体,我们将从以下几个方面进行介绍。...字体粗细 可以使用font-family属性定义文档采用优先字体系列。...通用字体系列 CSS定义了5种通用字体系列: a) Serif字体系列字体成比例,而且有上下短线。成比例是指字体所有字符根据其不同大小有不同宽度。例如,小写i和小写m宽度就不同。...e) Fantasy字体系列字体无法用任何特征来定义,包括Western、Woodblock和Klingon。 2. 指定字体系列 a) 除了通用字体系列,还可以设置更具体字体。...CSS3服务器端字体CSS3之前,Web设计师必须使用已在用户计算机上安装好字体

    2.5K20

    CSS基础知识

    font-family 字体设置,需搭配@font-face。 例: 有两种类型字体系列名称: 指定系列名称:具体字体名称,比如:“times”、“courier”、“arial”。...(或者自定义字体) 通常字体系列名称:比如:“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”   font-family 可以把多个字体名称作为一个...提示:使用逗号分割每个值,并始终提供一个类族名称作为最后选择。 注意:使用某种特定字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。...因此,强烈推荐使用一个通用字体系列名作为后路。...; font-style: 字体样式; font-weight: 字体粗细; } text 文字 text-indent 首行缩进 自己设置值 text-align 文字排列(center

    16210

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

    开本系列,谈谈一些有趣 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题思路,更涉及一些容易忽视 CSS 细节。...华文黑体(STHeiti)、华文细黑(STXihei) 属于同一字体家族系列,MAC OS X 10.6 之前简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。...上图是 Github 代码区块字体设置,可以看到,默认字体就是 Consolas ,紧接着几个都是其它等宽字体,如果用户系统中都没有预装这些字体,则会匹配最后一个 monospace ,它表示等宽字体系列...字体定义顺序 字体定义顺序是一门学问,通常而言,我们定义字体时候,会定义多个字体字体系列。...其次很多人都不知道 Android 下没有预装微软雅黑和宋体,那么 Android 机型下中文字体设置又是很考究

    1.1K30

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

    一类是类似这样具体字体族名定义:font-family: Arial 这里定义了一个具体字体样式,字体族名为 Arial; 一类是通用字体族名,它表示一大类字体(并非单个),类似这样:font-family...sans-serif 非衬线字体族 monospace 等宽字体,即字体中每个字宽度相同 cursive 草书字体 fantasy 主要是那些具有特殊艺术效果字体 新增通用字体族关键字 而在 CSS...math 适用于数学表达式 fangsong 此字体系列用于中文(仿宋)字体。...font-family: system-ui 字体设置优势之处在于它与当前操作系统使用字体相匹配,对于文本内容而言,它可以得到最恰当展示。...,以字体系列 serif 和 sans-serif 结尾 当使用一些非常新字体时,要考虑向下兼容,兼顾到一些极旧操作系统,使用字体系列 serif 和 sans-serif 结尾总归是不错选择

    4.6K20

    前端基础:CSS

    内部样式表 在 标签内通过 标签来声明 CSS。可以通过多个标签进行统一样式设置,但只能在本页面上进行修饰。...样式可以规定在单个 HTML 元素中,在 HTML 页头元素中,或在一个外部 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。...在CSS中,有两种类型字体系列名称: 通用字体系列 - 拥有相似外观字体系统组合,如 Serif 或 Monospace。...特定字体系列 - 一个特定字体系列,如 Times 或 Courier( 打字机上一种字体 )。 font-family 属性设置文本字体系列。...多个字体系列是用一个逗号分隔指明,如: p{font-family:"Times New Roman", Times, serif;} font-style 属性最常用于规定斜体文本。

    2.5K20

    CSS第一天

    CSS第一天 ---- 前言: CSS介绍: CSS:层叠样式表(Cascading style sheets) 作用:给页面中HTML标签设置样式 结构:HTML(决定了身体) 表现:CSS(决定了样式美观...- CSS引入方式: 引入方式 书写位置 作用范围 使用场景 内嵌式 CSS 写在style标签中 当前页面 小案例 外联式 CSS 写在一个单独.css文件中 多个页面 项目中 行内式 CSS 写在标签...在小页面中可能会用于去除标签默认margin和padding ---- 字体和文本样式: 1️⃣字体大小:font-size(数字 + px) 谷歌浏览器默认文字大小是16px,单位需要设置,否则无效...2️⃣字体粗细:font-weight 正常:normal(400) 加粗:bold(700) 不是所有字体都提供了九种粗细,因此部分取值页面中无变化 实际开发中以:正常、加粗两种取值使用最多4️⃣...center right decoration underline line-through overline none margin line-height wight ---- ---- 常见字体系列

    82110

    H5+CSS3+JS逆向前置——CSS3、基础样式表

    然而,仅仅使用HTML可能无法创建出具有复杂交互性和动态内容网站,因此通常还需要配合CSS(用于样式设计)和JavaScript(用于添加交互性)使用。...以下是一些常见 CSS 属性: 字体和文本属性: font-family:用于设置字体类型。 font-size:用于设置字体大小。 font-weight:用于设置字体粗细。...CSS3样式表 CSS3是一种用于描述网页样式标准语言,它提供了许多新样式特性,包括颜色、字体、布局、动画等。...多列布局(Multicolumn Layout):允许您创建具有多个布局。 圆角矩形(Rounded Corners):允许您为元素设置圆角矩形样式。...转换(Transformations):允许您改变元素大小、位置和形状。 这些只是CSS3一部分特性,还有许多其他特性,如盒模型改进、颜色函数、字体等。

    15110

    CSS属性继承有哪些?(回顾)

    CSS继承含义 CSS继承是指设置上级(父级)CSS样式,上级(父级)及以下子级(下级)都具有此属性。 可以被继承属性 字体系列属性: font-family:规定元素字体系列。...font-weight:设置字体粗细。 font-size:设置字体尺寸。 font-style:设置字体风格。...font-variant:设置小型大写字母字体显示文本,所有的额小写字母都会转换成大写字母,但是与其他文本对比,字体尺寸更小。...font-size-adjust:为某个元素规定一个aspect值,可以保持首选字体x-height。 文本系列属性: text-indent:文本缩进。 text-align:文本水平对齐。...元素可见属性:visibility 光标属性:cursor 内联元素可以继承属性: 字体系列属性。

    72830

    css基础系列

    css基础系列 盒子模型 盒子模型概念 高和宽设置 边框设置 内边距设置 外边距设置 盒子计算 元素显示方式 ?...css文本样式: text-align设置元素内文本水平对齐方式。...image.png 链接伪类 :link 未访问 :visited 已经访问 :hover 鼠标悬停 :active 激活 css继承和层叠 从父元素那继承部分css属性 css层叠可以定义多个样式...image.png id不要滥用,适当使用class css导入式@import 外部css样式 css字体和文本样式 文字:字体字体大小,颜色,加粗等 文本:行高,对齐方式,文本修饰等...字体:font-family 文字大小:font-size 文字颜色:font-color 文字粗细:font-weight 文字样式:font-style: normal | italic

    1.8K40
    领券