vue引入外部字体font-family

最新推荐文章于 2024-08-30 16:31:43 发布

YL雷子

最新推荐文章于 2024-08-30 16:31:43 发布

阅读量646

点赞数

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/Y_soon_start/article/details/132585313

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在vue项目下的src/assets静态文件夹下创建font文件，放入需要用的字体并新建font.css文件，同级目录下将外部字体放入

font.css代码，需要用到的字体在当前下引入

@font-face {
    font-family:"MyFont"; //自定义字体名称
    src: url('./micross.ttf'); //引入字体路径
}

在main.js中引入刚才创建的css文件 import "@/assets/font/font.css"
最后，在页面中可以直接使用字体

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YL雷子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3 -- 项目使用自定义字体font-family

King Saj

04-18

1194

引入字体文件：首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/fonts/。在全局样式中定义字体：在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。

Vue中引入外部字体

热门推荐

m0_51431448的博客

05-31

1万+

简述使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...

参与评论您还未登录，请先登录后发表或查看评论

【vue】Vue项目中引入外部字体文件

galaxyJING的博客

08-30

496

然后main里面引入一下。新建一个css引入字体。

css引入字体 font-family

MustImproved的博客

08-05

2939

添加了悠然小楷slideyouran字体，在的style中: @font-face { font-family: slideyouran; src: url("~assets/fonts/slideyouran.ttf"); } 使用： .proverb-content { font-family: slideyouran; } 缺点是字体的ttf文件太大了，有13M。 ...

vue 引入外部字体

ZhouHuiCSDN

06-15

204

引入外部字体

vue引入外部字体

LDL_CQ的博客

06-28

299

关于vue字体引入

Vue 引入外部字体

wangatong的博客

10-11

718

字体

CSS引入外部字体的方式（@font-face）

weixin_46353030的博客

04-29

2239

步骤一、在css文件中或者html的style标签里使用@font-face，其语法格式如下: @font-face { font-family: "字体名称1","字体名称2",...; src: url("字体存放路径"); } 步骤二、使用该字体 .test { font-family: "字体名称1","字体名称2",...; } 例如我要引入一个Pixeboy字体，完整代码如下： @font-face { font-family: "Pi

vue中css引用新字体（css引用新字体不成功）

weixin_42609363的博客

04-11

2174

vue中css引用新字体（css引用新字体不成功）废话就不多说了，直接上步骤在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件，我用的网站里面好像只有.ttf文件下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件夹新建一个对应的css文件，内容如下： @font-face { font-family: "whjztfont";

vue中引入第三方字体文件的方法示例

12-11

在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件或者https://www.jb51.net/fonts/点击此链接，进行字体下载 2.将字体文件引入自己定义一个文件夹，放入下载好的.ttf文件先自己定义一个font.css文件，将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal;

vue项目引入字体.ttf的方法

12-09

1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、可在body中设置字体 body{ font-family: FZCYJ; } 以上这篇vue项目引入字

在vue中更换字体,本地存储字体非引用在线字体库的方法

10-17

将`$fontFamily`添加到Vue原型，使得所有组件都可以通过`this.$fontFamily`访问到这个字体。然后，在你的CSS样式文件（通常是`style.css`或`app.css`）中，定义全局字体样式，使用刚引入的字体： ```css body, h1...

vue项目引入外部字体

qq_35971976的博客

07-14

1559

4.在main.js中引入font.css文件

vue中引入外部字体包

weixin_65767506的博客

02-23

350

在font.css文件中,font-family为自定义字体名字方便引入的时候使用,scr为引入字体包的名称。ttf一般为字体包,在src下新建 common 文件夹,把字体包放进来。3.在需要使用的地方先引入再使用。

vue引入外部字体文件

sinat_37984999的博客

06-01

299

第一步下载字体文件，并将文件放入static文件夹中

Vue项目中引入外部字体文件

蓝胖子的博客

04-03

1468

Vue项目中引入外部字体文件

vue引用外部字体

weixin_35756690的博客

01-04

369

在 Vue 项目中引入外部字体非常简单。首先，你需要下载你想要使用的字体文件。然后，将这些字体文件放在你的项目中的某个文件夹中，比如 assets 文件夹。接着，在你的 CSS 文件中(比如 style.css)添加如下代码： @font-face { font-family: 'yourfontname'; src: url('./assets/yourfontname.ttf') ...

vue2设置font-family: PangMenZhengDao-Cu, PangMenZhengDao-Cu样式不生效

最新发布

09-10

`font-family: PangMenZhengDao-Cu, PangMenZhengDao-Cu` 这样的样式设置可能不生效，通常是由于以下原因造成的： 1. 字体文件未正确引入：如果 `PangMenZhengDao-Cu` 是一个自定义字体，那么必须确保它已经被正确地引入到项目中。这通常涉及将字体文件放在项目的某个位置，并在CSS中通过`@font-face`规则或者直接通过link标签引入字体文件。 2. 字体格式不支持：Web字体支持多种格式，如`.ttf`、`.woff`、`.woff2`等。如果浏览器不支持所引入字体文件的格式，则字体样式不会生效。 3. CSS规则未正确应用：如果这段样式是在Vue组件中设置的，需要确保样式确实绑定到了正确的元素上，并且没有其他CSS规则覆盖了它。 4. 字体加载失败：有时候，字体文件可能由于网络问题或者其他原因导致加载失败。可以通过浏览器的开发者工具（如Chrome的Network面板）来检查字体文件的请求是否成功。 5. 浏览器兼容性问题：虽然现代浏览器大多数都支持自定义Web字体，但仍然可能有少数浏览器不支持或存在兼容性问题。确保上述问题都排查过后，字体样式仍然不生效，可以尝试以下操作： - 在`<style>`标签中使用`@font-face`规则明确指定字体文件的路径和格式，例如： ```css @font-face { font-family: 'PangMenZhengDao-Cu'; src: url('path/to/PangMenZhengDao-Cu.woff2') format('woff2'), url('path/to/PangMenZhengDao-Cu.woff') format('woff'), url('path/to/PangMenZhengDao-Cu.ttf') format('truetype'); } div { font-family: 'PangMenZhengDao-Cu', sans-serif; } ``` - 确保引入的字体文件路径正确，且文件本身没有损坏。 - 使用Web开发者工具检查样式是否正确应用到了目标元素上。