html给文字设置自己下载的字体

已于 2022-03-20 14:07:28 修改
阅读量3.9k 收藏 14
点赞数 1
分类专栏： html5 文章标签： html5
于 2022-03-20 14:04:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57207195/article/details/123611347
版权

在项目文件里新建一个文件夹fonts（存放自定义字体）

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTcyMDcxOTU=,size_20,color_FFFFFF,t_70,g_se,x_16

 把下载的字体放入文件夹，可以看到html界面出现

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTcyMDcxOTU=,size_20,color_FFFFFF,t_70,g_se,x_16

1. 在head下的style里用@font-face标签，

font-family里自己随意给字体命名（这里我命名为ziti）

src里放字体的相对路径（即你编程的js项目里睁眼就可以看到的fonts文件夹然后再是字体的文件名（FZJZJW.TTF）

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTcyMDcxOTU=,size_20,color_FFFFFF,t_70,g_se,x_16

 

2.这样就可以给文字设置成这种字体了。这里举列给元素选择器h1设置

只需要用font-family标签填刚刚命名的ziti就可以了

最后结果展示：

可以看到h1标签下的“把握移动端字体设计的七大准则”设置成了我们自己下载的字体

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTcyMDcxOTU=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

猿小鱼
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5时代CSS设置漂亮字体取代图片
09-25
如今，随着CSS3的字体设置功能的增强，我们可以更方便地使用各种漂亮的字体，而无需牺牲性能。 `font-family`属性是CSS中用于定义文本字体的关键属性，它允许我们指定一系列的字体，浏览器会按照顺序尝试应用这些...
html设置字体颜色的方法和使用ps获取html准确字体颜色的方法
09-28
里为大家介绍三种字体颜色设置包括HTML字体、CSS文字颜色、css超链接字体颜色,同时介绍了使用PS获取准确的颜色值方法。大家平时可以灵活扩展使用对字体、对背景设置颜色值
HTML&CSS字体之引入外部字体
鱼子酱冲鸭的博客
10-22 4201
首先，罗列下CSS中常用的字体属性： body { font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:italic; font-size:1rem; color:#111; } font-family中列出的是几乎适用于所有计算机的网络安全字体，如：Arial/Helvetica/Georgia/Times New Roman等。 但是如果想要一些特别的字体，可以从外部网站中找到并下载，
HTML5+CSS3之字体的下载使用
weixin_44827643的博客
05-09 2786
本文主要介绍如何在网站中下载字体并将其应用于网页之上，以以下网址为例进行相关操作的说明。Google Fonts | 谷歌字体中文版 | GoogleFontsGoogle字体·中国，提供Google字体调试工具、Google字体在线预览功能,国内可以使用.Google字体解封,Google字体CDN,Google字体镜像,GoogleFonts,谷歌字体http://www.googlefonts.net/ 1.进入网址后，选择所需字体，点击下载即可 2.解压文件至项目目录之中，文件名....
html 字体设置 （web端字体设置）
最新发布
ziqibit的博客
05-25 627
html设置开源字体
HTML（font）标签与属性的结合使用
wang__1110的博客
04-06 51
Response验证码
王寒寒的博客
10-23 225
最终实现的效果：
获取字体文件并在html中调用
weixin_42899191的博客
08-23 2082
要获取字体文件，可以通过以下几种方式： 使用系统字体：可以直接使用操作系统中已经安装的字体，无需额外获取字体文件。在CSS样式中使用字体名称即可，例如： body { font-family: Arial, sans-serif; } 使用Web字体：Web字体是专门为网页设计的字体文件，可以通过网络获取。常见的Web字体格式包括WOFF(Web Open Font Format)...
html中引入字体包
weixin_42400404的博客
05-10 1万+
1：下载字体包 之前在http://www.downyi.com/downinfo/181562.html 网站中下载过字体包。有的情况下会有附带插件。 2：字体包放在项目中 字体包存在项目文件中 3：新建font.css文件，在里面写入以下代码 @font-face { font-family: "HYLeMiaoTi"; //自定义字体名称 src:url("HYLeMiaoTiJ.ttf"); //字体包路径 font-wei.
在线字体转换文字生成艺术字系统源码
07-03
- 在线字体转换文字生成艺术字系统源码-支持自己添加字体在线艺术字体转换器：这是主要的源代码文件，表明该系统不仅提供预设的字体转换，还允许用户自定义添加新的字体，增强了系统的可扩展性和个性化程度。...
HTML5实现艺术字体效果
01-14
另一个重要的CSS3属性是`text-stroke`，它可以给文字添加描边，使得文字边缘更加明显。通过设置`text-stroke-width`和`text-stroke-color`，可以调整描边的宽度和颜色，以此来增加视觉冲击力。同时，`text-fill-...
html5自定义字体@font-face
07-28
html5自定义字体@font-face html5自定义字体@font-face
CSS3发光文字字体切换特效
07-31
**CSS3发光文字字体切换特效**是一种利用现代Web技术实现的动态视觉效果，它结合了JavaScript（JS）和层叠样式表（CSS3）的力量，为网页文本赋予独特的动画表现。这种特效通常用于吸引用户的注意力，提升网页的交互...
html设置自己下载的字体
ZFZ5720
05-28 8813
从字体网站上下载字体，引入到css中 在移动端直接设置h5页面的font-family是不起作用的 所以我们从网站上下载自己的字体。 @font-face { font-family: ‘阿里大黑体’; /字体名称/ src: url(‘../font/alida.ttf’); /字体源文件/ } body{font-family: “阿里大黑体”}...
html怎么引用字体包
热门推荐
极客on之路
11-15 2万+
@font-face {   font-family: 'MyNewFont';   /*字体名称*/   src: url('font.ttf');       /*字体源文件*/ } css 直接医用字体名称即可
html5字体属性与自定义字体(字体包的引入)
wang_w123的博客
08-31 7535
这篇博客主要介绍了字体的设置和字体包的引入.在这里为了简便方便理解直接截图了哈!1.字体的设置和相关的属性 如果自定义了字体包,就可以在font-family中填写自己定义的字体名 2.字体包的引入     (1)提供一个免费下载字体包的网站     http://font.chinaz.com/     (2)介绍     网上有很多可下载的字体包,ttf格式的就是字体包,按照图中
在html中展示自己设计的字体（使用自定义字体库实现数据加密）
Little Luck
11-08 6128
在iconfont这么发达的年代，作为前端设计工程师使用font awesome 是十分频繁的，而“png图”样式图标现在已经应用的比较少了，追溯其原因还是浏览器内核的渲染速度提升和字体库多浏览器（包括手机）的支持，矢量字体不会出现模糊的情况等等。从最早html4时代把图标做在一张图上使用css background来提高页面加载速度到“扁平化UI”趋势的到来，再到“手机UI”简洁化设计的大浪潮的...
html 页面自定义字体,如何在HTML中使用自定义字体？
weixin_30667831的博客
06-03 1038
我正在生成HTML页面运行时，我已将我的字体文件放在资产文件夹中。 “MyriadProRegular.otf”如何在HTML中使用自定义字体？String mStyle = " body { font-size: 100%; font-family: 'MyriadProRegular'; src: url('file:///android_asset/MyriadProRegular.otf'...
HTML字体(Fonts)
简单.专注..
11-12 347
在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。 字体大小 用字体大小属性(size)来设定字体的大小。示例代码如下： <p><font size="2">这一段的字体大小的值是2。</font></p> 演示示例 字体风格 用face属性来设定字体风格。示例代码如下： <p><fon..
vue 给文字 和数字 设置不同的 字体
05-03
你可以使用 CSS 的 font-family 属性和 font-size 属性来给文字和数字设置不同的字体和字号。 例如，假设你想要给文字使用 Helvetica 字体，数字使用 Arial 字体，同时给它们设置不同的字号，你可以这样写： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值