如何在css中添加新字体

最新推荐文章于 2025-06-29 13:11:25 发布
原创 最新推荐文章于 2025-06-29 13:11:25 发布 · 9k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html

该博客介绍了在CSS中添加新字体的方法。做前端时需新字体，可先在网上下载所需字体的ttf文件，存于与css文件同一文件夹下的font文件夹，再在css文件对应的类中添加font-family属性，使用时要注意单双引号。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在CSS中添加新字体

做前端的时候总是需要一些新的好看的字体，下面来看一下怎么在css中添加新的字体

在网上下载字体

在网上下载需要的字体的ttf文件，下载到font文件夹下，font文件夹和css文件在同一文件夹下

在这里插入图片描述

在css文件中定义新的字体

在这里插入图片描述

在对应的类中添加font-family属性，注意单双引号的使用！不然网页上没有结果的
在对应的类中添加font-family属性，注意单双引号的使用！不然网页上没有结果的

参考https://blog.youkuaiyun.com/amihui/article/details/53023358

de_la_prada
关注
【CSS】CSS字体样式【CSS基础知识详解】
@花无缺
11-08 1万+
文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。在 CSS 中，有五个通用字型： 衬线字体（Serif） 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感 特点：文字笔画粗细不均匀，并且首尾有笔锋装饰 场景：报刊书籍中应用广泛 常见该系列字体：宋体、Times New Roman 无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 特点：文字笔画粗细均匀
详解如何在css中引入自定义字体(font-face)
09-24
在现代网页设计中，如何在CSS中引入自定义字体(font-face)是一个非常实用的技术。使用@font-face规则，我们可以将设计师定制的字体嵌入到网站中，给网页带来独特、个性化的外观。随着CSS技术的演进，@font-face已经...
十九、CSS如何引入字体
weixin_30566063的博客
08-04 209
将相应的字体放入新建的文件夹，然后在Css文件里面如下图引入 @font-face { font-family: FZLTCXHJW; src: url(../font/FZYouHJW_Xian_a85e94b5d6.eot); src: url(../font/FZYouHJW_Xian_a85e94b5d6.eot?#iefix) format('em...
CSS字体字号设置方法详解
最新发布
BillKu的博客
06-29 525
* 格式: font-style font-variant font-weight font-size/line-height font-family *//* 点 (1pt ≈ 1.33px) *//* 相对于根元素(html)字号 *//* 视口宽度的1% (响应式) *//* 32px/36px (随基准值变化) *//* 基准值 (1rem = 16px) *//* 相对于父元素字号 *//* 大屏增加字号 */：至少提供3个字体选项（品牌字体 > 通用字体 > 字体族）/* 相对单位 */
CSS3 里添加自定义字体
weixin_30578677的博客
10-15 216
添加自定义字体是从 CSS3 开始的，下载到的字体可以在网页中使用。 下载字体 在网上找字体下载，文件后缀名有 ttf、otf 等。 在 CSS 里加载字体 @font-face { font-family: mytitlefont; src: url(../font/KINKIE__.TTF); } url 里是字体的路径。 如此，下载的字体就...
css 加载字体
TRAMP～
09-16 1121
@font-face { font-family: 'Museo500'; src: url('fonts/museo500-regular-webfont.eot'); src: url('fonts/museo500-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/museo500-regular-
css 引入新字体
不二法门
09-29 1021
/* * font.css * https://www.xyu.link * Copyright (c) 2015 Xiang Yu * License: GNU */ @font-face { font-family: 'Amatic SC'; src:url('../font/AmaticSC.woff2') format('woff2'), url('../
CSS 中的自定义字体.docx
07-27
2. 在 CSS 中定义字体样式：接下来，在 CSS 文件中定义字体样式。使用该 font-family 属性指定您要使用的自定义字体。 3. 应用自定义字体：现在您已经包含了字体并定义了其样式，是时候将自定义字体应用到网站上的...
浅谈CSS字体的加载加速问题
09-24
在网页设计中，字体的选择和加载对于用户体验至关重要。CSS提供了丰富的字体设置，允许开发者使用自定义字体提升网站的视觉效果。然而，自定义字体的加载可能会导致页面渲染延迟，影响用户体验，尤其是当字体文件较...
css3 @font-face 非系统字体添加
04-11
在CSS3中，`@font-face`规则是一个强大的特性，允许开发者引入非系统字体到网页设计中，从而提供更丰富的视觉体验。这个功能打破了浏览器对系统内置字体的依赖，使得设计师能够灵活地使用各种定制字体，提升网站的...
CSS-增加字体和颜色样式
qq_52876054的博客
08-20 1059
文本和字体 web颜色
CSS怎么在项目里引入自定义字体(@font-face)
weixin_54738957的博客
02-22 394
添加自定义字体： 　　　　1、首先需要下载所需字体 下载字体网站：https://www.fontke.com/ 2、把下载字体文件放入 font文件夹里（建议font文件夹与 css 和 image文件夹平级)） 3、引入字体（可直接在html文件里用@font-face引入字体，如下图，分别是字体名字和路径） 这样就可以直接给需要设置此字体的文字设置该字体了，如下图 　　　　　 ...
CSS增加web字体
softuse的博客
01-14 426
@charset "utf-8"; @font-face{     font-family: 'brush'; /*     字体所在目录*/     src :url('BrushScriptStd.otf'); } p{     font-size: 50px;     font-family: brush; }
CSS添加新字体
无数
09-18 2249
优雅的网页往往需要合适的字体。 本文介绍如何在css样式表中添加新字体，丰富网页显示效果。
css加载字体
mosliang的专栏
06-13 873
@font-face {      font-family: "Nilland-ExtraBold";      src: url("http://typefront.com/fonts/825588718.eot");      src: local("☺"),           url("http://typefront.com/fonts/825588718.woff") format("
在 CSS 里加载字体
忽尔明了
02-07 454
@font-face { font-family: mytitlefont; src: url(../font/KINKIE__.TTF);} font-family: mytitlefont;
css引入字体
VibMike的博客
06-09 9112
1、如果是下载的字体文件，直接能使用的就不需要转换，如果是TTF格式则需要转换成eot、svg、wpff，这里提供一个网站Font Squirrel | Create Your Own @font-face Kits，进行文字转换2、这里我用系统的文字来演示，打开C盘，找到windows下的Fonts文件夹，这是系统的字体文件，随便找一个你需要的，拖出来3、拿第一个FB来示范，点进去会有两个，一个细体一个粗体，用细体进行演示4、将文字拖到桌面，进入网站，点击Upload Fonts上传你的文件，BASIC为
CSS5 字体
flyzer的博客
04-11 148
<!DOCTYPE html> <html lang="zh-CN"> <head> <title> 我的页面 </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值