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

最新推荐文章于 2024-04-21 12:18:11 发布
最新推荐文章于 2024-04-21 12:18:11 发布
阅读量2.1k 收藏 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

在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
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于css3 font-face在项目中的引用
weixin_44315394的博客
04-22 376
@font-face是css3中的一部分内容，主要是用来自定义一些web字体用来嵌入到你的网页中，比如logo或者图标等，我们可以通过@font-face来自定义的，这样就有可以根据你所喜欢的颜色和大小来设置你喜欢的字体啦，而且它的兼容性也很好哦，占用内存也很小，接下来我把我在项目中所用到的心得分享给大家： 一般用到@font-face大多数是对icon的引用，以前我们都是把icon保存为png然...
判断base64文件类型
binquan_liang的博客
07-18 1801
uitl方法
深入解析CSS3 @font-face 规则：自定义与网络字体全面指南
最新发布
艾恩小灰灰的博客
04-21 1943
font-face规则是CSS3中用于定义和引用自定义字体的一种CSS规则。通过它，开发者可以将自定义字体文件（如.ttf.woff.woff2等格式）链接到网页中，使浏览器在渲染文本时使用这些指定的字体，而无需用户本地安装这些字体。Css定义好@font-face规则后，只需在常规CSS样式中使用定义的名称即可应用自定义字体。Cssbody {h1 {在上述示例中，body元素和h1元素将优先使用自定义字体。如果该字体加载失败或用户浏览器不支持，将回退到指定的备选字体（如Arial。
C语言文件读写操作
hello_dear_you的博客
12-09 4746
0. 背景介绍 在C语言中，stdio.h库中提供了Input/Output 操作的函数。本文主要是对文本读写的基本操作进行记录，下面为相关函数的简单介绍和应用。 1. 打开文件 在C语言中，通过调用fopen打开文件，函数定义如下： FILE * fopen ( const char * filename, const char * mode ); Paramenters filename：文件路径 mode：access mode访问方式 "r" Read: 打开一个文件用于读取.
简单获取base64格式文件的内容
爱java的小蓝的博客
06-26 6296
读取p7b格式证书链文件的时候，需要将文件内容存库，试了很多次才发现如此简单： String p7bContent = new String(file.getBytes); 如何查看文件格式是否为base64，将文件用Notepad++打开，即可判断，当然也可以直接通过文件来源咯！ ...
FILE *fopen
学不可以已的博客
11-27 2699
在C语言中，操作文件之前必须先打开文件；所谓“打开文件”，就是让程序和文件建立连接的过程。 打开文件之后，程序可以得到文件的相关信息，例如大小、类型、权限、创建者、更新时间等。在后续读写文件的过程中，程序还可以记录当前读写到了哪个位置，下次可以在此基础上继续操作。 标准输入文件 stdin（表示键盘）、标准输出文件 stdout（表示显示器）、标准错误文件 stderr（表示显示器）是由系统打开的，可直接使用。 使用 <stdio.h> 头文件中的 fopen() 函数即可打开文件，它的用法为：
Base64读取文件方法
zhangfeijava的专栏
12-02 2323
使用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
vue引入公共的css及在对应的模板.vue文件中引入css的方法
热门推荐
lily2016n的博客
04-23 4万+
在我们创建的vue项目中，为了使页面更加简洁，我们通常把公共的css和单个组件的css写道外面单个引入。 文件目录如下 加公共的css ①在main.js中加入@import '../static/css/reset.css'（main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件；App.vue是我们的主组件，所有页面都是在App.vue下...
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
在Vue2.x开发过程中，我们有时会遇到使用`@font-face`规则引入字体图标时出现的错误。本文将详细讲解这个问题的原因以及如何解决。 首先，当我们在Vue2.x项目中利用`@font-face`引入字体图标时，可能会遇到两种常见...
vue项目引入字体.ttf的方法
12-09
在Vue项目中引入自定义字体，特别是`.ttf`...同时，合理地管理和优化字体加载，避免影响页面加载速度，可以使用CSS的`@font-face`的`local()`方法，如果字体已存在于用户的系统中，可以直接使用，否则再从网络加载。
Jsp结合ElementUI要用的js和css
01-10
Element UI则是基于Vue.js设计的，因此在JSP中使用Element UI之前，必须先引入Vue.js。 1. 引入Vue.js 在JSP文件中，通常我们会在`<head>`标签内添加script标签来引入外部资源。对于Vue.js v2.6.11，你需要在JSP...
解决在vue项目中webpack打包后字体不生效的问题
10-18
4. **使用@font-face**：另一种方法是通过`@font-face`规则将字体文件引入项目，然后在CSS中引用。这种方法可以确保字体文件与CSS一起打包，并在需要时加载。 总的来说，解决Vue项目中Webpack打包后字体不生效的...
基于Vue+CSS+机器学习实现web端人脸注册人脸识别登陆项目源码+项目使用说明(毕设项目).zip
07-19
2. face_login_app 文件夹中保存移动端代码，使用weui+vue，build后的dist代码放入到APP的dist中 3. vue-element-admin 文件夹为网页边人脸识别登陆前端代码 #### 特别说明 1. 手机端访问摄像头需要https 2. ...
File转base64的封装(回调函数形式)，以及如何通过base64判断数据源的类型
dongnihao的博客
06-21 1819
最近的task都是文件流的上传下载各种转。主要是涉及File转base64简要思路就是：FileReader读取文件，通过readAsURL方法，获得一个base64类型的流看了看网上别人的封装： 自己的实现其实可以封装一个callback回调函数 该方法接受一个FIle类型的文件 和 一个callback回调函数先将文件读取为base64格式 再给fileReader对象添加load完成事件，执行回调。此时拿到的是base64的字符串，比较好处理。顺便一提，很多时候需要对base64字符串处理，获
fopen 打开文件，处理数据
shinebxy的博客
01-08 3150
1、fopen ： 打开文件或url , 如果的打开失败返回false fopen（filename/url，mode）  这两个参数是必选的，第一个文件名/url，第二个打开的方式 $handle = fopen($filename,'r'); 打开方式常用的有以下几种： r      只读方式打开，将文件指针指向文件头 r+    读写方式打开，将文件指针指向文件头 w    写入...
微信小程序——拍照、压缩转换base64（不留存照片在本地相册）
yunle51939的博客
11-26 1715
文章目录前言展示效果jswxmlcompress.js总结 前言 通常使用wx.chooseImage这个api去拍照时通常会留下照片在本地相册，在一些需求情况下不需要留存照片所以在这里我们使用另一个wx.createCameraContext() 展示效果 js var compress = require('../../../../libs/compress.js'); const app = getApp() Page({ /** * 页面的初始数据 */ data: {
android 文件转base64，Base64转文件
JBBOY的专栏
04-04 3万+
在项目中需要用到文件传输入，为了传输方便最好的办法是将文件转成base64字串，再将base64字串转成字节流保存在文件了。 不过这种做法的虽然简单，但还是要根据实际需要进行选择；弊端是不能转太大的文件，文件太大会造成效率上的问题。具体多大，笔者没有做深入研究和实际测试。如有兴趣，可以自己深入研究测试。 需要导入 import android.util.Base64; {CSDN:C
java 通过图片的Base64字符串判断文件格式
gmHappy
04-27 1万+
/** * base64字符串转写为文件 * * @param base64ImgData * @param filePath * @throws IOException */ public static void convertBase64DataToImage(String base64ImgData, String filePath) throws IOExce...
C文件操作——文件读取（重难点）
树下一朵云的博客
01-24 1340
无规律数据 1.以字符方式读写 字符读取函数：fgetc(); 读 函数原型：int fgetc (FILE *fp); 　　函数功能：用于从一个以只读或读写方式打开的文件上读字符，从fp所值的文件中读取一个字符，并将位置指针指向下一个字 符，若读取成功，则返回该字符， 　　若读取不成功则返回EOF（EOF 是 end of file ...
@element-plus/icons-vue 如何通过cdn引入
09-14
通过 CDN 引入 @element-plus/icons-vue 是非常简单的。你可以按照以下步骤进行操作： 1. 首先，在你的 HTML 文件中，添加 Element Plus 的 CSS 文件和 Vue 的 JavaScript 文件的 CDN 链接。你可以在 `<head>` 标签中添加以下代码： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@latest/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script> ``` 2. 接下来，在 `<body>` 标签的最底部，添加 Element Plus 的 JavaScript 和 Icons 的 JavaScript 的 CDN 链接。你可以在 `<body>` 标签底部添加以下代码： ```html <script src="https://cdn.jsdelivr.net/npm/element-plus@latest/lib/index.full.js"></script> <script src="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@latest"></script> ``` 3. 现在，你可以在你的 Vue 组件中使用 @element-plus/icons-vue 了。例如，你可以这样导入和使用其中的一个图标： ```javascript import { ElIcon } from 'element-plus' export default { components: { ElIcon } } ``` ```html <template> <div> <el-icon name="el-icon-search"></el-icon> </div> </template> ``` 以上就是通过 CDN 引入 @element-plus/icons-vue 的步骤。确保在引入相关文件之前，先引入 Vue 和 Element Plus 的 CSS 文件和 JavaScript 文件。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值