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

最新推荐文章于 2024-08-03 21:59:12 发布
最新推荐文章于 2024-08-03 21:59:12 发布
阅读量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 1025
引入字体文件： 首先，确保你的字体文件（通常是.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，将字体包...
全民一起VBA实战篇 专题4 第四回 位运算处理零一变换，属性值识别文件类型
09-15 694
相关知识点： GetAttr 函数，文件或文件夹的名字，返回一个数字，代表该文件的各种属性。 位运算（逻辑尺）：and（按位与，位乘），将判断的属性值与属性返回的数值and，计算结果为判断的属性值，则此文件夹具备此属性，否则不具备。 例1得到子文件夹的名字(返回不仅是文件夹的名字还有文件的名字) Sub dirdemo() Dim fname as ...
qmoc文件_为什么重要的是包括“.moc”文件在Qt源代码文件的末尾？
weixin_39614637的博客
12-22 134
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...
Vue引用CSS
最新发布
weixin_72132360的博客
08-03 292
在中，很多时候会使用相同效果的css，这个时候我们可以写一个把该样式写入一个css文件，想要使用时就去调用就可以了，关键来了！vue如何去引用这个css文件呢?
用python格式化小说txt
weixin_34255055的博客
09-29 194
下载了《无人生还》的txt版。传到手机，发现阅读器识别得不够好。 原文格式如下： 第一章 一 沃格雷夫法官先生新近离任退休，现在正在头等车厢的吸烟室里，倚角而坐，一 边喷着雪茄烟，一边兴致勃勃地读着《泰晤士报》上的政治新闻。 沃格雷夫放下报纸，眺望窗外。列车奔驰在西南沿海的萨默塞特原野儿他看了看 表，还有两小时路程。 沃格雷夫法官先从口袋里掏出一封信。尽管笔迹认不真切，...
判断base64文件类型
binquan_liang的博客
07-18 1946
uitl方法
VBA 按照文件类型名称打开一个文件
weixin_30539625的博客
12-08 533
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 2139
vue中css引用新字体（css引用新字体不成功） 废话就不多说了，直接上步骤 在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件，我用的网站里面好像只有.ttf文件 下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件夹 新建一个对应的css文件，内容如下： @font-face { font-family: "whjztfont";
vue2关于引入字体的步骤
gaoyapei1993的博客
03-24 1365
vue
YOLOv4：ubuntu18下使用darknet训练自己的模型
Flag_ing的博客
09-27 1393
为什么是小白教程？因为曾经我也是小白。。。 首先，确认你电脑的有关环境是否符合以下要求： CMake >= 3.12 CUDA >= 10.0 OpenCV >= 2.4 cuDNN >= 7.0 GPU with CC >= 3.0 不知道具体的版本号也没关系，如果不符和，在代码运行时会提示的，到时候根据错误提示调整对应的版本就可以了。 小白逆袭第一步：下载GitHub源码。 首先创建一个存放YOLOv4代码的文件夹，cd到该文件夹下。如，我在/home/(.
VBA 常用文件判断
更多资料私我
04-08 981
一、代码 '判断文件是否打开 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 2019
我们知道使用VBA打开一个电子表格指令，例如指令： Application.Workbooks.Open Filename:= "C:\Excel\Report.xls" 打开位于文件夹C:\Excel里面的文件Report.xls。除了使用专门的应用程序打开文件之外，你如果也想要创建VBA过程能够打开其它类型的文件并使用它们的内容的话，你就应该学习一些关于被称为低级别的文件I/O（input/output）。 接下来关于顺序，随机和二进制文件的章节将会带你直接接触你的数据。 文件的访问类型 计算机
VB 判断图片文件的类型格式
miaozk2006的专栏
07-18 956
'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 6530
代码： // 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 981
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,
QT无法编译#include *.moc的项目，报No such file or directory
自由冲击波
11-19 3905
前两天出现项目中源文件#include .moc文件，就编译报错No such file or directory。moc文件是QT会自动生成的，为什么会报找不到？ 回忆自己卸载了旧版QT，安装了最新版，估计跟注册表残留有关。于是卸了，清理了一下注册表残留，主要是在注册表中查找所有包含“qt”的项，注意不要全字匹配，这样手动区别一下，找得彻底一点。主要有以下重点区域： HKEY_CURRENT
Base64读取文件方法
zhangfeijava的专栏
12-02 2448
使用jdk的base工具类操作 代码如下，对本地的文件进行读取并转码 package org.jeecg.modules.fsmService.util; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.InputStreamReader; import sun.misc.BASE64Decoder; import sun.misc.BASE64En
antd vue怎么设置成中文字体
07-12
在 Ant Design Vue 中设置中文字体，可以通过以下步骤实现： 1. 导入中文字体文件：首先，将中文字体文件（例如.ttf或.otf格式）下载并放置在项目的静态资源文件夹中，比如 `public/fonts/` 目录下。 2. 创建全局样式：在项目的 `src` 目录下创建一个新的全局样式文件，比如 `global.css`。 3. 设置字体样式：在 `global.css` 文件中，使用 `@font-face` 规则设置字体样式。例如： ```css @font-face { font-family: 'MyCustomFont'; src: url('/fonts/MyCustomFont.ttf') format('truetype'); } ``` 确保将 `url()` 函数中的路径指向中文字体文件的正确位置。 4. 引入全局样式：在项目的入口文件（通常是 `main.js` 或 `main.ts`）中引入全局样式文件。例如： ```javascript import './global.css'; ``` 5. 应用字体样式：在 Ant Design Vue 的配置文件（通常是 `vue.config.js`）中，使用 `css.loaderOptions` 配置项来向 webpack 注入自定义的样式。例如： ```javascript module.exports = { css: { loaderOptions: { less: { modifyVars: { 'font-family': 'MyCustomFont, Arial, sans-serif', }, }, }, }, }; ``` 注意：如果你已经有了一个 `less` 字段，只需将 `modifyVars` 添加到现有的 `less` 配置中即可。 6. 重新编译项目：重新启动项目的开发服务器或重新编译项目，以使更改生效。 通过上述步骤，你可以将 Ant Design Vue 中的字体设置为你下载的中文字体。记得将 `MyCustomFont` 替换为你字体文件中的实际字体名称。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值