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

@ font -face css添加自定义字体

@font-face是CSS中的一个规则,用于向网页中添加自定义字体。通过@font-face规则,开发者可以使用自己的字体文件,而不仅限于浏览器默认的字体。

@font-face规则包含以下几个属性:

  1. font-family:指定字体的名称,用于在CSS中引用该字体。
  2. src:指定字体文件的路径,可以是本地路径或者远程URL。
  3. font-weight:指定字体的粗细程度,常用的值有normal、bold等。
  4. font-style:指定字体的风格,常用的值有normal、italic等。
  5. unicode-range:指定字体支持的Unicode字符范围。

使用@font-face添加自定义字体的步骤如下:

  1. 准备字体文件:通常包括字体的不同粗细和风格的文件,如.ttf、.otf、.woff等格式。
  2. 在CSS中定义@font-face规则,指定字体的名称、文件路径和其他属性。
  3. 在需要使用自定义字体的元素上,通过font-family属性引用定义的字体名称。

自定义字体的优势:

  1. 增强网页设计的自由度:通过使用自定义字体,可以使网页的字体更加独特,与众不同,提升用户体验。
  2. 提高品牌识别度:使用自定义字体可以帮助建立和巩固品牌形象,使网页与品牌保持一致。
  3. 改善多语言支持:自定义字体可以包含多种语言字符,提供更好的多语言支持。

@font-face的应用场景:

  1. 网页设计:通过使用自定义字体,可以实现更加个性化和创新的网页设计效果。
  2. 品牌宣传:使用自定义字体可以帮助品牌在网页中传达独特的风格和形象。
  3. 多语言网站:自定义字体可以包含多种语言字符,适用于多语言网站的设计和开发。

腾讯云相关产品和产品介绍链接地址:

腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。然而,根据要求,我不能直接给出腾讯云的产品链接地址。你可以访问腾讯云官方网站,了解更多关于腾讯云的产品和服务信息。

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

相关·内容

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.8K30

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.4K20

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.6K20

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

不过通过@font-face来实现的Font Icon,我们可以自定义并使用各种符号实体——这些符号实体正确来说应该叫做Web实体符。  ...七、自定义Font Icon                         由于使用既定的Web字体库需要将整个字体库都下载下来,而实际上用到的Font Icon则只有数个而已,因此通过自定义Font...九、参考                              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

CSS font-family 属性设置字体

前言 ---- font-family 属性用于给元素指定字体,是开发中使用非常频繁的一个属性 该属性的值是一个字体系列,每个值使用逗号隔开,如果字体名名称包含空格,那么字体名称必须使用引号包裹,设置的字体是否可用取决于用户机器上该字体是否可用...给英文,中文设置不同的字体 ---- 众所周知,font-family 属性的原则是客户端不支持前面的字体时,自动往后查找可以使用的字体 如果想要给英文,中文设置不同的字体,可以使用一个仅支持的英文的字体...Sans SC(思源黑体) 字体 :root { font-family: Arial, 'Noto Sans SC'; } 3...." 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.5K20

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

本文,将借助这个效果,介绍一下什么是 CSS font-variation。 什么是 CSS font-variation,可变字体?...从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用,即可获取包含在这个单一文件中的各种字体变体。...加载可变字体的语法与其他 web 字体非常相似,但有一些显著的差异,这些差异是通过对现代浏览器中可用的传统 @font-face 语法的升级提供的。...这次,除了字体粗细外,我们再添加上 "wdth" 的变化,也就是字体的伸缩。...' 400, 'wght' 900; opacity: 1; } } 效果如下: 好,接下来,利用 CSS 3D 简单构造一下 3D 场景即可,完整的 CSS 代码如下: @font-face

1.1K10

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

关于字体的基础知识,建议先看看这篇 你该知道的字体 font-family[5] font-family 关键字 对于 CSS 中的 font-family 而言,它有两类取值。...关于通用字体族名,在 CSS Fonts Module Level 3 -- Basic Font Properties[6] 中,定义了 5 个,也就是我们熟知的几个通用字体族名: serif 衬线字体族...譬如天猫在最前面添加了 "PingFang SC",miui,..必定也有他们的业务上的考虑。但是一些 fallback 方案向后兼容的思想都是一致的,值得参考学习。.../ [3] Github: https://github.com [4] CSS-Tricks: https://css-tricks.com/ [5] 你该知道的字体 font-family: https...://caniuse.com/#search=system [9] CSS-Tricks: https://css-tricks.com/ [10] 你该知道的字体 font-family: https

3.8K20

css使用自定义字体教程

开源字体库 站长字体 --字体资源丰富 fontke --字体资源丰富 阿里inconfont --阿里图标库的字体,就是字体比较少 使用字体文件 一般下载的字体文件是.ttf格式,也有的是woff...、woff2、otf等 定义字体 css文件使用@font-face定义一个字体font-family必写,为字体随便起一个名字 src必写,字体文件的路径 font-display选填,建议写上,...字体文件加载完成前是否显示原生字体 1@font-face { 2 font-family: "font"; 3 src: url("..../assets/font/HarmonyOS_Sans_SC_Medium.subset.woff2"); 4 font-display: swap; 5} 使用字体 定义好字体之后,在需要使用的元素上...,直接加font-family就可以了,值需要跟定义的名字一致 1#root { 2 font-size: 16px; 3 font-family: "font"; 4} 本站字体 logo---

1.2K20

minigui:自定义字体文件的安装位置(install location for custom font)

https://blog.csdn.net/10km/article/details/83381762 我们的基于minigui的嵌入式系统项目中使用了True Type字体,原以以为只要把字体文件应用程序所在路径下的字体文件夹...上面的错误看出,minigui在初始化的时候还是去/usr/local/share/minigui/res/font下去找字体了。...为了确认minigui初始化字体时的逻辑,查看了代码,下面是libminigui-3.2.0/src/font/devfont.c中的init_or_term_specifical_fonts函数的片段...// 因为在MiniGUI.cfg中字体定义一般是这样的fontfile0=font/Courier-rr-8-13.vbf else if ((AddDevFont (font_name...所以如果你不想改minigui的源码,就把自己的字体文件文件放在/usr/local/share/minigui/res/font好了

57810

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....在线字体 @font-faceCSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。... /* 自定义在线字体,浏览器会自动下载下面的字体文件 */ @font-face { font-family: 'glyphicons'; src: url('....Font Awesome 提供了高可用性的矢量图标字体。它可以用强大的CSS自定义图标的大小、颜色、图标阴影等。

3.2K60

04-移动端开发教程-在线字体图标

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....在线字体 @font-faceCSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。... /* 自定义在线字体,浏览器会自动下载下面的字体文件 */ @font-face { font-family: 'glyphicons'; src: url('....Font Awesome 提供了高可用性的矢量图标字体。它可以用强大的CSS自定义图标的大小、颜色、图标阴影等。

3.2K60

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券