web网页怎么引入自定义字体

最新推荐文章于 2024-05-12 22:21:16 发布
最新推荐文章于 2024-05-12 22:21:16 发布
阅读量663 收藏 1
点赞数
文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41667361/article/details/94325175
版权

1、下载需要的字体，.eot .ttf .woff .svg格式
2、没有的字体格式，可以在这个网站中https://www.fontke.com/tool/fontface/转换一下（完全免费，支持各种格式），然后把转换的字体格式文件放到项目下的fonts文件夹里
3、css中引入字体文件（"SourceHanSansCN-Normal"是你自己自定义的这个字体的名字）

在这里插入图片描述

头像是我别怀疑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义web字体并通过@font-face在网页中嵌入自定义字体
01-04
自定义web字体，通过@font-face在网页中嵌入自定义字体
使用Cufon技术实现Web自定义字体
weixin_33850890的博客
02-21 115
　　在网页设计中，设计师会在设计中加入一些特殊效果的字体以使得页面更加美观，然而访问者的系统一般都是没有安装这些特殊字体的，所以使用font-family属性来定义这些特殊字体是行不通的，于是人们想出了很多解决方案，今天要介绍的是其中之一的Cufon方案。 定义及基本原理 　　什么是Cufon呢？简单的说，Cufon是一个用来替代sIFR（更早期的一种自定义字体实现方案）框架，实现在网页中...
html 怎么使用自定义字体？
最新发布
HongYingClub-CSDN
05-12 621
html 怎么使用自定义字体？
web引入字体方法
球球不吃虾WHR2349博客
06-25 675
web引入字体方法 引入字体格式 @font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix...
网页中导入自定义字体并使用
weixin_30500105的博客
12-19 335
@font-face是CSS3中的一个模块，它可以把自己定义的Web字体嵌入到网页中。 其使用方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导入自定义字体并使用</title> &...
在网页中引入图片字体
wangwenkai76的博客
09-11 513
   在我们查看网页代码的时候，会经常看到这样的符号 可以看到红色框框里i标签里边的一个矩形框，这个矩形框实际上就是第一个红色框里的 这个符号。这个符号仍然拥有字体样式的一些属性，我们也可以对它进行大小，加粗，倾斜等一系列的样式处理。这就是我们常说的字体图片。 那么我们的字体图片是怎么引进我们网页中来的呢。 这些图片其实都是我们通过网站来引进我们的网页中的 推荐给大家几个比较好用...
使用Cufon技术实现Web自定义字体2
quxiantao的专栏
07-16 581
步骤三：应用Cufon渲染 在完成了上述的两项准备工作后，使用 Cufon 类库来实现对字体的渲染是非常简单的，这仅仅牵涉到了 Cufon 类库所提供的一个核心方法，即 Cufon.replace 方法，如下代码所示：  Take me to your heart            Cufon.replace("h1");        Cufon.set("fontSize","6
怎么引入自定义字体
YogoProgrammer的博客
06-04 473
1.导入字体文件 2.新建font.css文件 @font-face{ font-family: 'pingFangSC'; src: url('PingFang-SC.ttf'); font-weight: normal; font-style: normal; } *{ font-family: "Helvetica Neue",Helvetica,"pingFangSC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-seri
WEB前端自定义字体的实现方法
weixin_37746257的博客
11-08 3114
本文部分转自W3CPLUS 的《CSS @font-face》 一、获取特殊字体：（可在各大素材网站下载） 我们拿下面这种single Malta字体来说吧： 要得到single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web ...
web中使用自己想要的字体
like_a_diamond的博客
10-17 2223
找一个字体库下载字体解压后添加到文件夹。
web网页引入自定义字体设置
xinxin的博客
11-30 1万+
新项目中  设计用了一个自定义的字体，由于不熟悉，折腾了好大一圈，最终在同事的帮助下，顺利解决，记录一下，供有同样疑虑的小伙伴参考。 1、首先需要下载你需要的字体，此项目中用到的字体是思源黑体（light），需要字体文件的格式是.ttf，思源的ttf版字体不好找，我是下载的otf版，又用fontCreate 软件转换了一下，算是得到了ttf字体（废了老大劲，才转换成，网上贴出来的在线转换文字格式
如何在html中使用自定义字体
08-20
如何在html中使用自定义字体
web在网页中引用字体包(.ttf)嵌入特殊字体
热门推荐
前进者
10-16 2万+
在写html时，有点时候需要显示一些特殊字体，不过这些特殊字体是系统一般不自带的，这时就需要我们自行加载要用的字体。方法如下： 1、首先在公用的style里添加： @font-face { font-family:fz; src: url('../fonts/fontfz.ttf'); } font-family属性定义的该字体引用名，方便引用 src:url后是本地字体资源.ttf...
如何在web页面使用自定义字体
goodgirl1991的专栏
12-27 8541
很多时候我们想要让页面更漂亮一些，更有逼格一些，这样的话，在页面使用自定义字体必不可少。如何实现这一功能呢？ 下载字体样式 首先，当然是从网上下载下来你所想要使用的字体样式。为了让我们的字体形式在不同浏览器下皆可以显示，最好将该字体形式的各个类型都下载下来，即.eot、.woff、.ttf、以及.svg类型。我将所下载的该字体文件都放置在了font文件夹中，font文件夹与网页代码的位置以及所
webpack之项目中引入字体
coding...
05-04 8375
前言：本文演示了如何在项目中应用字体图标；用到的loader: file-loader正文：在common下面新建fonts文件夹，并在其中加入我们手动下载好的字体文件（这里使用开源项目Ionicons）：编辑我们的style/main.css文件。在app.js中引入main.css文件：这里根据以往经验，我们知道这里需要一个loader来处理我们的字体图标。这里，我们需要loader帮我们做两...
自定义web字体-通过@font-face在网页中嵌入自定义字体
xuanhaiyang2008的专栏
01-03 1万+
在项目中用到的web字体现在有三种：Themify Icons、Glyphicons、FontAwnsome，用的时候发现还是有些体图标不存在或者不合适，然后用图片代替了。在空闲时间研究了下FontAwnsome，发现FontAwesome有.eot、.svg、.ttf、.woff、.otf字体文件，然后在css文本由@font-face引入并配合css样式在页面中显示字体图标的。
引入字体—web网页里面嵌入想要的字体文件
柠檬不萌只是酸i
05-27 5286
最近遇到个问题，页面使用的字体要用PingFangSC字体，引入方法如下： 简单介绍下PingFangSC字体： （1）苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; （2）苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; （3）苹方-简 ...
前端人员如何在页面中导入外部字体
HUSKle的博客
07-26 1万+
在http://fonts.mobanwang.com/fangzheng/这个网站中下载你所需要的字体文件，下载到页面解压之后，在https://www.fontke.com/tool/fontface/字体生成器中选择你所需要生成的字体 左侧所上传的文件就是刚刚解压出来的字体文件，右侧是你所需要生成的字体格式，点击立即生成，将生成的字体放到你的项目中，然后将 @font-face {...
网页内引用外部字体方法
nimo观察者
04-05 2002
在自建博客的UU们可以关注一手，强推我的好兄弟辞旧
web怎么用自定义字体
05-29
要使用自定义字体，你需要先在网页中引入字体文件，然后在CSS样式表中定义字体名称和使用该字体的元素。 以下是一个示例： 1. 在网页中引入字体文件。你可以将字体文件上传到服务器，然后使用`@font-face`规则将字体文件引入到网页中。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <style type="text/css"> @font-face { font-family: 'MyCustomFont'; /* 定义字体名称 */ src: url('mycustomfont.woff') format('woff'), /* 字体文件的路径和格式 */ url('mycustomfont.ttf') format('truetype'); } body { font-family: 'MyCustomFont', Arial, sans-serif; /* 使用自定义字体 */ font-size: 16px; } </style> </head> <body> <p>Hello, world!</p> </body> </html> ``` 在上面的示例中，`@font-face`规则用于定义字体名称和字体文件的路径和格式。`body`元素使用了自定义字体和默认字体。 2. 将字体文件放在网站根目录的`fonts`文件夹中，并在CSS样式表中引入字体文件。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <style type="text/css"> @font-face { font-family: 'MyCustomFont'; /* 定义字体名称 */ src: url('/fonts/mycustomfont.woff') format('woff'), /* 字体文件的路径和格式 */ url('/fonts/mycustomfont.ttf') format('truetype'); } body { font-family: 'MyCustomFont', Arial, sans-serif; /* 使用自定义字体 */ font-size: 16px; } </style> </head> <body> <p>Hello, world!</p> </body> </html> ``` 在上面的示例中，`url()`函数中的路径是相对于网站根目录的，因此要将字体文件放在`fonts`文件夹中，并将路径设置为`/fonts/`。 你可以根据自己的需求来选择其中的一种方法来使用自定义字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值