引入字体

字体加载与应用技巧
最新推荐文章于 2025-07-09 09:51:47 发布
原创 最新推荐文章于 2025-07-09 09:51:47 发布 · 743 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种通过@font-face规则加载自定义字体的方法，并提供了不同格式字体文件的路径示例，包括EOT、WOFF、TTF及SVG等，适用于多种浏览器环境。
部署运行你感兴趣的模型镜像

1、http://www.font2web.com/
字体转换网站

2、@font-face {

    font-family: 'SEGOEWP';
    src: url('/Css/common/SEGOEWP.eot'); /*Ie9*/
    src: url('/Css/common/SEGOEWP.eot#iefix') format('embedded-opentype'), /*Ie6-ie8*/
    url('/Css/common/SEGOEWP.woff') format('woff'), /*chrome,firefox*/
    url('/Css/common/SEGOEWP.ttf') format('truetype'), /*chrome,firefoxopera,safari,android,ios4.2+*/
    url('/Css/common/SEGOEWP.svg#SegoeWP') format('svg'); /*ios 4.1-*/

}

#iefix不变

绿颜色的字是字体路径

#SegoeWP取决于 在浏览器上打开

网址/Css/common/SEGOEWP.svg


您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

Vue中引入外部字体
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
使用uniapp开发小程序-【引入字体并全局使用】
weixin_48596030的博客
08-01 652
UniApp小程序引入自定义字体方法：在App.vue中使用@font-face定义网络字体...
Vue中引入字体
m0_68940359的博客
12-27 664
1、将字体放入vue文件中，例如。
vue 项目引入 字体文件
macangyewangs的博客
04-11 542
亲测无误，不会报错 第一步 第二步 /* 引入字体 */ @font-face { font-family: 'FZCHYJW'; src: url('FZCHYJW.ttf'); font-weight: normal; font-style: normal; } @import "./font.css"; 使用 font-family: 'FZCHYJW'; 效果图 ...
CSS 引入字体
exlinker的博客
07-18 1万+
文章目录涉及知识@font-face特点用法属性解析font-family用法简单应用更多应用网络/本地引入本地引入网络引入引入其他格式字体引入系列字体 涉及知识 @font-face @font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。 特点 可以自定义字体名称和与名称对应的字体文件 可以消除用户对电脑字体的依赖 可以用于字体图标的引入 用法 @font-face { font-family: "myFont"; src: url("/fonts/OpenS
在项目中引入新字体
liona_koukou的博客
05-24 3647
在项目中引入新字体，我的环境是vue+webpack其它环境操作应该差不多1、下载需要的字体文件，我这里需要的是Let'sgo Digital Regular字体，下载压缩包里面只有一个.ttf文件，如果要兼容IE浏览器还需要IE专用文件，推荐在线转换网站https://www.fontsquirrel.com/tools/webfont-generator上传压缩包里的ttf文件，下载下来的压缩...
vue项目引入字体.ttf的方法
12-09
5. **引入字体到Vue组件**：在你的Vue组件（如`App.vue`）中，通过`import`语句引入`font.css`： ```javascript import './common/font.css'; ``` 这样就将字体样式引入到了当前组件中。 6. **应用字体**：最后...
解决vue 项目引入字体图标报错、不显示等问题
10-18
在Vue项目中，引入字体图标是一项常见的操作，但有时可能会遇到一些问题，如报错或图标不显示。本文将详细解析这两个问题的原因及相应的解决策略。 首先，问题一：字体图标报错。当我们在Vue项目中尝试引入字体图标...
vue引入字体
qq_43840793的博客
10-30 727
这个与两个字体，优设标题黑和DIN字体，font.css用于给字体取名，将字体引入网站。1、在src/assets文件夹下新建一个font文件夹，放入字体文件与配置文件。在main.js引入。
vue中引入字体
weixin_40856652的博客
06-30 9107
vue中引入字体
前端js/CSS中引入字体(@font-face)
热门推荐
weixin_55763825的博客
12-06 2万+
前端设计采用@font-face规则进行字体的引入 详细步骤： 一、在CSS引入字体； 1、单个字体引入； 2、多个字体引入。 二、在JavaScript中使用: 1、使用className = { styles.a } ; 2、直接使用style = {{ fontFamily：AdobeHeiTiStd-Regular }} 。 ...
Vue引入自定义字体
qq_60542647的博客
04-19 1281
创建global.css文件。在main.js中引入。2.在需要的地方使用。3.整个项目中使用（
Vue3中引入外部自定义字体
04-20 6133
免费商用字体下载（中文字体、繁体字体、英文字体、日文字体、韩文字体），含有授权说明，不定期更新，诚信分享。将下载的ttf文件放到 src/assets/font 文件夹中。
vue引入字体，自定义字体
Jerry子辰的博客
09-03 547
字体文件后缀名一般为ttf，想在vue项目中引入字体并自定义字体的名字： 1.在全局css文件夹内新建一个引入字体的文件 @font-face { //也可以写其他样式比如color，fontSize之类的 font-family: 'shrry'; //自定义字体名 src: url('./../../../assets/shrryFont.ttf'); //引入字体文件 font-weight: normal; font-style: normal; } 2.在main.js中引
vue引入字体文件
qq_48245893的博客
07-09 474
vue字体引入
vue引入外部字体
马优晨
07-18 4938
1、下载所需要的字体，.ttf格式本文以（HYLiLiangHeiJ.ttf 为例） 2、在src下新建CSS文件，文件夹中包含以下文件 3、打开font.css 这里注意两个问题： （1）URL里面必须是绝对路径； 否则： （2）如果使用使用绝对路径，必须文件上传到自己服务器的CDN 否则： @font-face { font-family: 'HYLiLiangHeiJ'; sr...
vue项目中引入字体包
木木木华的博客
02-22 2348
vue项目中引入字体包
前端工程引入字体
最新发布
12-09
在前端工程中引入字体，不同的项目场景有不同的引入方法，以下是一些常见的方式： ### Vue项目引入字体 - **第一步**：去下载所需字体，确保后缀为.ttf，例如YousheBiaoTiHei.ttf。 - **第二步**：将字体文件放入项目指定位置，如将下载的ttf文件放在src/assets/css/YousheBiaoTiHei.ttf。 - **第三步**：在同级目录中建立css文件（如src/assets/css/YousheBiaoTiHei.css）或scss文件等。 - **第四步**：在css文件中编写`@font-face`规则给字体命名和引入字体文件，示例代码如下： ```css @font-face { /*给字体命名*/ font-family: 'YouSheBiaoTiHei'; /*引入字体文件，具体路径由自己的实际情况而定*/ src: url('./YouSheBiaoTiHei.ttf'); } ``` 此外，也可以在assets下新建一个font文件夹，在里面新建一个font.css文件，同时放入下载的字体文件，然后在font.css文件里定义字体包名字，最后在main.js中引入font.css文件，也可以在需要的文件里引入，示例代码如下： 引入方式（可选择其一）： - 在main.js中引入： ```javascript import './assets/fonts/font.css'; ``` - 在需要的文件中引入： ```html <style src='../../assets/fonts/font.css'></style> ``` ```html <style> @import '../../assets/fonts/font.css'; </style> ``` ```html <style> @import url('../../assets/fonts/font.css'); </style> ``` ### 通用前端项目引入字体 在项目的fonts文件夹中新建font.css文件进行配置，使用`@font-face`定义字体，示例代码如下： ```css @font-face { font-family: "HYXJ"; src: url("./mnhyxj.ttf") format("truetype"); } ``` 配置完成后，在需要的地方引入该css文件，最后即可使用该字体。同时，在引入字体时，可以设置备用字体，当引入的字体失败时会使用备用字体，如`serif`（也可以不添加）[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值