css中的@font-face使用和vue中全局和局部引入css

最新推荐文章于 2024-09-21 09:21:26 发布
置顶 最新推荐文章于 2024-09-21 09:21:26 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： vue 前端 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/108770352
版权
前端 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏
本文介绍了在Vue项目中如何全局引入CSS，并提供了两种局部使用CSS的写法，包括在组件内直接编写样式和导入外部CSS文件。此外，详细讲解了如何利用FontMeme和FontSquirrel创建并应用自定义字体，包括字体文件的转换和在CSS中定义font-face的步骤。
摘要由CSDN通过智能技术生成

vue中全局引入css

在main.js中通过import引入

然后就能在代码中使用css

css在局部使用有两种写法

第一种写法就是：直接在vue文件中写不过要注意需要在style中添加scoped的属性

样式就起作用了

还有一种就是直接在外部创建css文件通过import局部导入文件

css中使用font-face，使用时，你要先找到自己使用的字体，通过自己转换得到woff和woff2文件

推荐自定义字体网址https://fontmeme.com/ziti/这个是Font Meme字体库，找到字体库下载自己所需要的字体文件tff文件

通过tff文件转换woff和woff2文件。转换地址推荐一个https://www.fontsquirrel.com/tools/webfont-generator

转换完成之后拿到文件放到自己的项目中

然后在需要的css中定义font-face

然后使用是在你添加的样式中定义font-family

lixu_boke
关注
专栏目录
vue3 -- 项目使用自定义字体font-family
King Saj
04-18 1366
引入字体文件： 首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/fonts/。在全局样式中定义字体： 在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。
全民一起VBA实战篇 专题4 第四回 位运算处理零一变换，属性值识别文件类型
09-15 717
相关知识点： GetAttr 函数，文件或文件夹的名字，返回一个数字，代表该文件的各种属性。 位运算（逻辑尺）：and（按位与，位乘），将判断的属性值与属性返回的数值and，计算结果为判断的属性值，则此文件夹具备此属性，否则不具备。 例1得到子文件夹的名字(返回不仅是文件夹的名字还有文件的名字) Sub dirdemo() Dim fname as ...
qmoc文件_为什么重要的是包括“.moc”文件在Qt源代码文件的末尾？
weixin_39614637的博客
12-22 135
Why is important to add an include for .moc file in a Qt cpp source code?This is a common step used in serveral Qt samples, including this one:http://doc.qt.io/qt-5/qttestlib-tutorial1-example.html; w...
【Outfit Font】全方位介绍与使用指南
lph159的博客
09-21 841
Outfit Font 是一款无衬线字体，采用极简风格设计，具有清晰易读的字形，非常适合现代化的网页设计和品牌视觉传达。它由 Google Fonts 提供免费使用，并且支持多种字重（weight），如细体、常规体、粗体等，适应多种设计需求。Outfit Font 是一款极具现代感的无衬线字体，其简洁、优雅和多功能的设计让它在各类设计项目中脱颖而出。从品牌视觉设计到网页和移动应用开发，Outfit Font 都能提供卓越的视觉体验。
用python格式化小说txt
weixin_34255055的博客
09-29 208
下载了《无人生还》的txt版。传到手机，发现阅读器识别得不够好。 原文格式如下： 第一章 一 沃格雷夫法官先生新近离任退休，现在正在头等车厢的吸烟室里，倚角而坐，一 边喷着雪茄烟，一边兴致勃勃地读着《泰晤士报》上的政治新闻。 沃格雷夫放下报纸，眺望窗外。列车奔驰在西南沿海的萨默塞特原野儿他看了看 表，还有两小时路程。 沃格雷夫法官先从口袋里掏出一封信。尽管笔迹认不真切，...
判断base64文件类型
binquan_liang的博客
07-18 2036
uitl方法
VBA 按照文件类型名称打开一个文件
weixin_30539625的博客
12-08 546
Application.GetOpenFilename(fileFilter, fileIndex, fileSelectTitle, button, False) fileFilter: 指定能够被选择的文件类型 例："CSV文件(*.csv),　*.csv, 所有的文件(*.*), *.*" 这里有一点需要注意，如果上面有n对的话，n>1时，该程式的返回值为一个数组；如...
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
在Vue2.x开发过程中，我们有时会遇到使用`@font-face`规则引入字体图标时出现的错误。本文将详细讲解这个问题的原因以及如何解决。 首先，当我们在Vue2.x项目中利用`@font-face`引入字体图标时，可能会遇到两种常见...
vue中css引用新字体（css引用新字体不成功）
weixin_42609363的博客
04-11 2197
vue中css引用新字体（css引用新字体不成功） 废话就不多说了，直接上步骤 在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件，我用的网站里面好像只有.ttf文件 下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件夹 新建一个对应的css文件，内容如下： @font-face { font-family: "whjztfont";
vue项目引入字体.ttf的方法
12-09
在Vue项目中引入自定义字体，特别是`.ttf`...同时，合理地管理和优化字体加载，避免影响页面加载速度，可以使用CSS的`@font-face`的`local()`方法，如果字体已存在于用户的系统中，可以直接使用，否则再从网络加载。
vue2关于引入字体的步骤
gaoyapei1993的博客
03-24 1439
vue
python output和print_Python基础---output【print()】
weixin_42130786的博客
02-09 2484
一、 输出字符串1. 一般字符串>>> print("My name is Pegga!")My name is Pegga! 2. 输出带单引号(’)的字符串方法一：>>> print("I'm Pegga!")I'm Pegga! 方法二：>>> print('I\'m Pegga!')I'm Pegga! 3. 输出带双引号(")的字符串...
YOLOv4：ubuntu18下使用darknet训练自己的模型
Flag_ing的博客
09-27 1417
为什么是小白教程？因为曾经我也是小白。。。 首先，确认你电脑的有关环境是否符合以下要求： CMake >= 3.12 CUDA >= 10.0 OpenCV >= 2.4 cuDNN >= 7.0 GPU with CC >= 3.0 不知道具体的版本号也没关系，如果不符和，在代码运行时会提示的，到时候根据错误提示调整对应的版本就可以了。 小白逆袭第一步：下载GitHub源码。 首先创建一个存放YOLOv4代码的文件夹，cd到该文件夹下。如，我在/home/(.
VBA 常用文件判断
更多资料私我
04-08 1012
一、代码 '判断文件是否打开 Sub test() Dim i As Integer '定义循环变量 For i = 1 To Workbooks.Count '开始循环 If Workbooks(i).Name = "模拟工资表.xlsx" Then '判断工作簿是否打开 MsgBox "文件已打开！" Exit Sub
ExcelVBA之读取文件及文件访问类型
soga235的博客
06-08 2070
我们知道使用VBA打开一个电子表格指令，例如指令： Application.Workbooks.Open Filename:= "C:\Excel\Report.xls" 打开位于文件夹C:\Excel里面的文件Report.xls。除了使用专门的应用程序打开文件之外，你如果也想要创建VBA过程能够打开其它类型的文件并使用它们的内容的话，你就应该学习一些关于被称为低级别的文件I/O（input/output）。 接下来关于顺序，随机和二进制文件的章节将会带你直接接触你的数据。 文件的访问类型 计算机
VB 判断图片文件的类型格式
miaozk2006的专栏
07-18 983
'VB 通过二进制方式来判断图片的格式，下面只对 JPG 、GIF、PNG、BMP、ICO 几个常用的图片格式做了判断。 Public Function GetImageType(ByteArray() As Byte) As String    If ByteArray(0) = &HFF And ByteArray(1) = &HD8 Then        ...
【base64】java 通过图片的Base64字符串判断文件格式
惠菁
10-12 6644
代码： // base64字符串转写为文件 public static void convertBase64DataToImage(String base64ImgData, String filePath) throws IOException { Files.write(Paths.get(filePath), Base64.getDecoder().decode(base64ImgData), StandardOpenOption.CREATE); } // 将文件转写为base
VBA 判断类型
zhaoleiedu的博客
12-11 1007
vba 判断类型 原始数据 ID num REMARK CHECK mary 100 Chinese john 1001 2020/1/1 eric 999 666 hello 1 判断是否为日期 Isdate 是否为数字Isnumeric Sub shishi() Dim i As Integer For i = 2 To Cells(65536, 1).End(xlUp).Row If IsNumeric(Cells(i, 3)) Then Cells(i,
python output和print_将函数print output赋给string variab
weixin_32559133的博客
02-09 258
解决方案之一是将所有itermediate字符串存储到容器中，然后再将它们join。报价文件：string.join(words[, sep]) Concatenate a list or tuple of words with intervening occurrences of sep. The default value for sep is a single space character...
vue2中使用vue2SourceHanSansSC-VF.otf如何设置粗体
最新发布
09-29
在Vue 2中使用`vue2SourceHanSansSC-VF.otf`字体文件，并设置粗体，你需要先将该字体文件添加到项目资源目录中，然后通过CSS将字体样式关联到元素上。这里是一个基本步骤： 1. **添加字体文件**： - 将`vue2SourceHanSansSC-VF.otf`复制到项目的`static`或`assets`目录下，通常推荐放至`src/assets/fonts`。 2. **引用字体**： 在`main.js`或全局CSS中，使用`@font-face`规则声明新字体： ```javascript import Vue from 'vue' import SourceHanSans from '@/assets/fonts/vue2SourceHanSansSC-VF.otf' Vue.prototype.$font = { sourceHanSans: () => `url(${SourceHanSans})` } ``` 或者在CSS中： ```css @font-face { font-family: 'Source Han Sans SC'; src: url('@/assets/fonts/vue2SourceHanSansSC-VF.otf') format('opentype'); } ``` 3. **在HTML或组件中使用**： 使用`v-bind:class`结合自定义的CSS类来控制元素的粗体样式，比如创建一个`.bold`类： ```html <p :class="{ bold: isBold }">这是一段文字</p> ``` ```css .bold { font-weight: bold; font-family: 'Source Han Sans SC', sans-serif; /* 如果需要指定字体 */ } ``` 4. **控制粗体状态**： 在JavaScript里，你可以通过`isBold`等变量来动态切换`.bold`类的显示与否： ```javascript data() { return { isBold: false // 默认非粗体 }; }, methods: { toggleBold() { this.isBold = !this.isBold; } }, // 然后在模板中添加按钮点击事件来触发toggleBold方法 // `<button @click="toggleBold">加粗/取消加粗</button>` ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值