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

CSS @ font -face不支持多种字体粗细

CSS @font-face是一种CSS规则,用于在网页中引入自定义字体。它允许开发人员使用非系统默认字体来渲染网页文本,从而实现更丰富的字体样式。

然而,CSS @font-face不直接支持多种字体粗细。它只能引入字体文件,并允许在CSS中指定字体的名称、文件路径和格式。字体的粗细通常由字体文件本身定义,而不是由CSS @font-face规则控制。

要实现多种字体粗细的效果,开发人员可以通过引入多个字体文件来实现。每个字体文件对应一种粗细程度。然后,可以使用不同的CSS类或选择器来应用不同的字体粗细。

以下是一个示例,展示如何使用CSS @font-face引入多种字体粗细:

代码语言:txt
复制
@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.ttf') format('truetype');
  font-weight: bold;
}

.my-regular-text {
  font-family: 'MyFont', sans-serif;
  font-weight: normal;
}

.my-bold-text {
  font-family: 'MyFont', sans-serif;
  font-weight: bold;
}

在上面的示例中,我们引入了两个字体文件:myfont-regular.ttf和myfont-bold.ttf。分别对应正常(normal)和粗体(bold)的字体粗细。然后,我们定义了两个CSS类:.my-regular-text和.my-bold-text,分别应用不同的字体粗细。

在实际应用中,可以根据需要引入更多的字体文件,以实现更多种类的字体粗细。同时,可以根据具体情况调整字体文件的路径和格式。

腾讯云提供了丰富的云计算产品和服务,其中包括与字体相关的服务。然而,由于要求不能提及具体的云计算品牌商,无法给出腾讯云相关产品和产品介绍链接地址。建议在腾讯云官方网站或文档中搜索与字体相关的服务,以获取更多信息。

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

相关·内容

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 : 默认不加粗样式...在 CSS 中 , 可使用 font-style 设置 字体粗细 ; body { font-style:italic; } font-style 属性值设置 : normal : 默认没有斜体的样式

4.7K20

CSS字体font

字体大小 font-size 设置字体的大小 ,px 是一个单位,代表屏幕的上的像素,在css大多数数值都需要添加单位 font-size: 12px; 字体粗细 font-weight 设置字体粗细...,取值:默认(normal) 、加粗(bold)、 100 - 900 font-weight:bold 因为字体在初始设计的时候就没有设置太多的粗细标准,用数字设置的时候,只有在400和700会产生变化...,在实际工作中 用的最多的就是normal(400) bold(700) 字体风格 font-style 设置字体的风格(样式) 取值:normal 默认 显示标准的字体样式 italic 字体倾斜...font-style:italic; 字体类型 font-family 设置不同的字体,取值:宋体、微软雅黑、黑体等等。...font-family:"宋体"; 字体可以写多个,中间用逗号隔开,浏览器会从左到右依次解析,直到识别出当前电脑安装的字体则直接使用,字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号

2.9K30

CSS3魔法堂:认识@font-faceFont Icon

@font-face遵循先定义后使用原则;   2. 由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;   3....@font-face无效有可能是字体的加载路径错误;   4. FireFox中@font-face字体加载路径使用相对路径时,可能会失败,具体原因和解决办法如下:       a)....九、参考                              http://www.w3cplus.com/content/css3-font-face http://stackoverflow.com.../questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie http://www.dynamicdrive.com...63628-font-face-not-working-in-Firefox-5 http://www.w3cplus.com/css3/web-icon-with-font-face http://www.webhek.com

2K80

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

CSS 中 , 字号大小 设置 语法如下 : p { font-size:16px; } 上述代码的含义是 , 将 HTML 页面所有的 p 标签字号都设置成 16 像素 ; font-size...---- 1、 语法简介 CSS 文字 字体设置语法 : p { font-family:"微软雅黑"; } 常见的字体 : 微软雅黑 , 默认字体 ; 宋体 黑体 如果 指定了多个字体 , 如下样式..., 优先使用前面的字体 ; .tittle { font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei"; } 先查找黑体..., 如果黑体存在直接使用黑体 , 如果黑体不存在则继续查找 Arial 字体 , 直到找到合适的字体 ; ( 如果所有字体都没有 , 默认使用电脑的默认字体 ) font-family 字体属性值注意事项..., $ 等字符 , 则必须加双引号 或 单引号 ; 使用系统的默认字体 , 不要使用不常见的字体 , 保证浏览器适配 ; 2、 Unicode 编码字体名称 在 CSS 中 设置 中文名称字体 时 ,

2.7K20

CSS font-family 属性设置字体

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

2.6K20

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

scale 是等比例放大缩小一个物体,而仔细观察上述效果,明显是有字体粗细字体的字宽的变化。这里,其实用到了 CSS 比较新的特性 -- 可变字体,也就是 font-variation。...从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用,即可获取包含在这个单一文件中的各种字体变体。...理解 font-variation-settings 除了直接通过 font-weight 去控制可变字体粗细CSS 还提供了一个新的属性 font-variation-settings 去同时控制可变字体的多个属性...还是利用上述的可变字体,我们利用 font-variation-settings 实现一个字体粗细的变化的动画: Anybody @font-face { font-family: 'Anybody...' 400, 'wght' 900; opacity: 1; } } 效果如下: 好,接下来,利用 CSS 3D 简单构造一下 3D 场景即可,完整的 CSS 代码如下: @font-face

1.2K10

CSSCSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...:16px; 字体设置 : 常用 微软雅黑 / 宋体 / 黑体 , 如果 指定了多个字体 , 优先使用前面的字体 ; font-family:"微软雅黑"; font-family:"黑体",Arial...,"微软雅黑","Microsoft Yahei"; 粗细设置 : 使用 font-weight 设置 字体粗细 ; normal : 默认不加粗样式 ; bold : 粗体 ; 1000 ~ 900...设置 字体 是否倾斜 ; normal : 默认没有斜体的样式 ; italic : 斜体 ; font-style:italic; 2、CSS 字体设置综合写法 字体样式 的顺序 , 不能打乱...font-weight font-size/line-height font-family;} 示例 : body { font: italic 400 16px "宋体" } 3、CSS 文本样式

1.7K10

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

衬线字体 -- 关键字为 serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。 ?...中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。 ? 对比着来看: ?...关于字体的基础知识,建议先看看这篇 你该知道的字体 font-family[5] font-family 关键字 对于 CSS 中的 font-family 而言,它有两类取值。...Segoe UI Segoe UI 是 Windows 从 Vista 开始的默认西文字体族,只有西文,不支持汉字,属于无衬线体。 它也表示一个系列而不是某一款单一字体。...这个字体家族包含Thin、Light、Regular、Medium、Bold、Black六种粗细及相配的斜体。 网站字体定义推荐写法 到此,我们可以总结一下了。

4.5K20

网页|CSS字体介绍

除了上一节我们讲到的背景以外,字体也是一个我们最常用到的属性,接下来我们就来讲一讲CSS字体CSS字体(font)属性定义文本中的字体,我们将从以下几个方面进行介绍。...字体粗细 可以使用font-family属性定义文档采用的优先字体系列。...现在通过CSS3 @font-face,Web设计师可以使用他们喜欢的任意字体,并将该字体文件存放到Web服务器上,用户在访问页面时,字体会在需要时被自动下载到用户的计算机上。...@font-face规则中定义的描述符。 描述符 值 描述 font-family name 必需。规定字体的名称 src URL 必需。...默认是 "U+0-10FFFF" 如果使用服务器端字体,必须首先在@font-face规则中定义字体的名称和位置,然后在HTML元素中通过font-family来引用服务器端字体。 END

2.5K20

css基础」关于字体相关的基础知识(一)

,而幻想体就是在手写之外,更多了一些装饰或纹路在字体上,大多数的中文预设不支持幻想体,如果设置了,也会自动使用衬线体或无衬线体取代。...用法简介 使用font-family很简单,只需要设定family-name (字体名称)和generic-family (通用字体),font-family可以设定一种字体多种不同的字体,每种字体间用半形逗号...举例来说,下面这行CSS,会先找第一种字体,若不支持或没有该字体,则采用第二种字体,依此类推,最后使用通用字,从下方例子亦可以看到,字体名称时不用加上双引号,但如果你的字体名称中间空格,就一定要加上双引号...五、 常用的字体属性简介(CSS1、CSS2部分) 以下内容,为CSS排版字体常用到的CSS属性,我先暂且简单罗列,帮助大家进行回顾,对于重点的部分我会在稍后的文章里进行介绍。...code> On the Web 小节 今天的内容就给大家分享到这里,感谢大家的阅读,在下面的文章里,我将会给大家分享字体相关知识,比如font-face、可变字体、书写模式的相关内容,敬请期待

98600

css基础」关于字体相关的基础知识(一)

,而幻想体就是在手写之外,更多了一些装饰或纹路在字体上,大多数的中文预设不支持幻想体,如果设置了,也会自动使用衬线体或无衬线体取代。...四、font-family 用法简介 使用font-family很简单,只需要设定family-name (字体名称)和generic-family (通用字体),font-family可以设定一种字体多种不同的字体...举例来说,下面这行CSS,会先找第一种字体,若不支持或没有该字体,则采用第二种字体,依此类推,最后使用通用字,从下方例子亦可以看到,字体名称时不用加上双引号,但如果你的字体名称中间空格,就一定要加上双引号...五、 常用的字体属性简介(CSS1、CSS2部分) 以下内容,为CSS排版字体常用到的CSS属性,我先暂且简单罗列,帮助大家进行回顾,对于重点的部分我会在稍后的文章里进行介绍。...小节 今天的内容就给大家分享到这里,感谢大家的阅读,在接下来的文章里,我将会给大家继续分享字体相关知识,比如font-face、可变字体、书写模式的相关内容,敬请期待...

94530

CSS基础03-CSS字体属性

03-CSS字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文字样式(如斜体等)。 3.1字体系列 CSS使用font-family属性定义文本的字体系列。... p { font-family: Arial, 'Microsoft Yahei', '微软雅黑'; } 各种字体之间必须使用英文逗号相隔 一般情况下,如果使用了由空格隔开的多个单词组成的字体...,根据先后顺序依次查看系统是否支持,若不支持则查看后一个,若全都不支持则使用系统默认的字体显示 实际开发中,字体设置常用于标签来将整个页面中的字体全部修改掉 3.2字体大小 CSS使用 font-size...,我们应尽量给一个明确值,而不要使用默认大小 同样可以通过给设置字号大小来指定整个页面文字的大小(标题标签除外,需要单独设定) 3.3字体粗细 CSS使用 font-weight属性来设置字体粗细...)、lighter(细体)、number(直接使用数字,不要加单位,相对于单词属性值,数字属性值更推荐使用) 3.4文字样式 CSS使用 font-style属性设置文字样式,属性值有normal(默认值

1.9K20
领券