教你学会html添加自定义字体，使用@font-face和免费字体网站

最新推荐文章于 2024-06-10 11:01:09 发布
最新推荐文章于 2024-06-10 11:01:09 发布
阅读量3k 收藏 2
点赞数
分类专栏： 2020-12 文章标签： html 前端 ttf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnMuMuPrincess/article/details/110767918
版权
本文介绍了如何通过@font-face和免费字体网站如字体视界、字客网来添加自定义字体到HTML项目中。首先，从字体下载网站获取字体文件，接着使用@font-face生成器创建CSS文件，然后将生成的字体文件放入项目并引用到main.js中，最后在CSS中应用新字体以实现预览效果。

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

字体引入
  1. 字体视界是一个免费字体下载网站，商用需授权：https://www.17font.com/
  2. 字客网：@font-face生成器：https://www.fontke.com/tool/fontface/ 可以直接生成css文件

下载字体后，将字体.ttf文件上传到@font-face生成器，如下图

图片

生成好的zip解压，将里面的文件复制到vue项目中 自己建立的字体文件夹 中

在这里插入图片描述

在main.js中引用字体的css文件

//引用的自己下载的字体
import "./assets/fonts/仓耳非白W04/仓耳非白W04.css";

css文件中内容如下

@charset
最低0.47元/天 解锁文章
CSS免费在线字体格式转换器 CSS @font-face 生成器
任磊
01-04 3500
CSS免费在线字体格式转换器 CSS @font-face 生成器
深入解析CSS3 @font-face 规则：自定义与网络字体全面指南
艾恩小灰灰的博客
04-21 3073
font-face规则是CSS3中用于定义和引用自定义字体的一种CSS规则。通过它，开发者可以将自定义字体文件（如.ttf.woff.woff2等格式）链接到网页中，使浏览器在渲染文本时使用这些指定的字体，而无需用户本地安装这些字体。Css定义好@font-face规则后，只需在常规CSS样式中使用定义的名称即可应用自定义字体。Cssbody {h1 {在上述示例中，body元素和h1元素将优先使用自定义字体。如果该字体加载失败或用户浏览器不支持，将回退到指定的备选字体（如Arial。
web 引入思源字体
sunny_day的博客
05-14 9415
1.下载SourceHanSansCN-Regular.TTF https://www.fontke.com/font/18839412/download/ 2.解压得到左边文件 3.找到在线font-face生成器 https://www.fontke.com/tool/fontface/ 根据提示上传SourceHanSansCN-Regular.TTF 可以得到以下文件： ...
如何在html中使用自定义字体
08-20
如何在html中使用自定义字体
CSS基础知识
但行好事 无问西东
07-18 187
CSS概述： CSS(Cascading Style Sheet) 层叠样式表: 因为单纯用HTML写出来的界面比较丑，所以就有了CSS来美化它；使用CSS来美化主要使用的是style标签，基本格式如下： 选择器{ 属性 属性 ... } 代码示例： <!DOCTYPE html> <html lang="en"> <head> ...
再探@font-face及webIcon制作
weixin_34162401的博客
01-27 94
@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face 是个什么东西，本文不做过多说明，不太清楚的童鞋可以看这里 http://www.w3schools.c...
html/css导入自己的字体样式
热门推荐
Mr_ZhouR的博客
03-23 1万+
步骤一： 先将要添加的字体放入工程内，如：HYShangWeiShouShuW.ttf 步骤二： 在css文件中，声明字体样式，命名为shangwei @font-face { font-family:shangwei; src:url("font/HYShangWeiShouShuW.ttf")； } 步骤三： 在想使用字体的class中的font-family后...
网页自定义字体CSS @font-face应用及制作.docx
02-10
网页自定义字体CSS @font-face应用及制作 @font-face 是一种 CSS 规则，用于在网页中自定义字体，实现网页设计中字体的自定义。通过 @font-face 规则，可以将自定义的字体应用于网页中，使得网页设计变得更加丰富...
CSS自定义字体@font-face：使用方法及format属性
最新发布
m0_72348850的博客
06-10 1449
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+Windows和Mac上常见的字体格式 这是一种原始格式 因此并没有为网页进行优化处理。浏览器支持：IE4+
CSS3 @font-face网页中的字体
04-23
`stylesheet.css`是样式表文件，包含了`@font-face`规则和使用自定义字体的CSS代码。`specimen_files`可能包含字体样本或其他相关资源。 总的来说，CSS3的`@font-face`特性极大地丰富了网页的字体选择，让设计师能...
用@font-face实现网页特殊字符(制作自定义字体)
09-22
用css来实现三角箭头，虽然达到需要的效果了，但还是有一些问题，比如依旧需要靠position来定位箭头的位置,目前也只能实现三角箭头，若想用一些其他的字符，还是得用图片，接下来与大家分享一个好的方法
自定义web字体并通过@font-face在网页中嵌入自定义字体
01-04
自定义web字体，通过@font-face在网页中嵌入自定义字体
html5自定义字体@font-face
07-28
html5自定义字体@font-face html5自定义字体@font-face
前端开源库-stylus-font-face
08-29
前端开源库-stylus-font-face手写笔字体，@font face生成器手写笔插件
@font-face制作Web Icon
06-12
@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛，我们就不在为这个问题说太多的话了，不过我今天要与大家分享的主题和这个@font-face还是有很在关系的，使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。
CSS生成字体@font-face
webnoties的专栏
11-23 2356
需要本地有字体文件，如：helvetica-light.otf 通过工具自动生成网页字体，如：http://www.fontsquirrel.com/tools/webfont-generator 点击UPLOAD后，再DOWNLOAD 会得到一个目录包，如：helvetica-light 然后CSS里定义，如： @font-face { font-family: 'Helvet
40 个可通过 @font-face 使用的免费字体
weixin_33828101的博客
12-20 171
@font-face 允许用户从网上下载字体并直接在电脑上自动完成安装，因此开发者不用担心某个字体在用户的电脑中是否存在的问题。本文推荐 40 个免费的可通过 @font-face 使用的字体： Aaargh Afta Sans Amaranth Lacuna Regular Nobile Artifika Droid Serif EB Garamond...
html字体制作,用@font-face实现网页特殊字符(制作自定义字体)
weixin_36352023的博客
06-30 751
首先，我们去C盘Fonts文件夹里找到WEBDINGS.TTF字体，复制到桌面。接下来，我们需要一个软件，就是“fontforge”，它可以实现制作自定义字体的功能，我们后面就要用它来做一个适用于我们自己的字体库。下载好后解压，把WEBDINGS.TTF字体复制到里面，运行fontforge.bat并选择字体文件，然后出现这个界面：很多图形字符吧，是不是发现很多字符以前都用到过，只不是那时是用图片...
html 使用 思源字体_常用的可商用免费字体
weixin_28741413的博客
01-02 1834
常用的可商用免费字体对于大部分公司来说，字体版权意识还需要加强，除了付费购买字体之外，互联网还有很多免费可商用的字体共设计师选择，下面是一些常用的免费可商用字体整理，附有授权链接，供大家查阅。【字体分享包领取方式见文末】另外还有一点就是，有些网站提供了汉仪和华康在京东阿里的合作字体，注意，这些字体只能在京东和阿里平台使用，是方便商家使用的，如果在这俩平台之外使用就会造成侵权，请大家谨记。由于会造成...
HTML5中实现自定义字体@font-face的技巧
在Web设计与开发中，自定义字体的使用已经成为提升网站个性和用户体验的重要手段。由于版权和加载速度的考量，Web字体技术得到了快速的发展。HTML5作为当前网页设计的主流标准，通过@font-face规则提供了加载和使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值