vue页面使用自定义字体

一、准备好字体文件

一般字体问价格式为 .tff,可以去包图网等等网站去下载,好看的太多了!!!

下载下来就是单个的 .tff文件,下载下来后可以进行重命名,但是不要改变他的后缀名,我把他命名为me.tff:

二、vue配置

知其然也要知其所以然,简单说下替换字体的原理:

下载一个字体文件,然后在 app.vue的style里面使用 @font-face 配置相关的字体配置,配置完之后,相当于整个样式当中就多了一个你设置的字体,然后你就可以在任何vue页面进行使用了。

下面开始使用:

1.app.vue里面配置字体信息

@font-face {font-family: "me-word";src: url('./assets/me.ttf');font-weight: normal;font-style: normal;
}

代码说明:

font-family:这个是你自定义的字体名称,建议个性化一点,不要和系统已有字体重名!

src:这是字体文件相对于app.vue的地址

另外两个参数,保持默认吧

我的文件路径配置如下,是直接放在assets的文件夹里面的,你也可以在里面创建个font文件夹,但是对应路径也要增加;这块的url里面就是一个相对路径地址

2.在具体页面进行使用 

在页面的div中,使用一个样式,比如 text-style,然后咋style标签里面进行配置:

.text-style {font-family: 'me-word', sans-serif;font-size: 40px;line-height: 50px;
}

整体示例页面如下:

3.看效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

秋招季!别浮躁!

好久没写了,今天兴致来了,众所周知我一旦想说话,就来这里疯狂写。 最近,我去了一家国企的研究院,听着是不是贼高大上,呵——这玩意儿把我分配到三级机构,我一个学计算机的,它不把我…

【c++】类和对象详解

✅博客主页:爆打维c-CSDN博客​​​​​​ 🐾 🔹分享c语言知识及代码 来都来了! 点个赞给博主个支持再走吧~! 一.类的定义 (1)类定义格式 class为类定义的关键字,定义一个类格式如下: class 类名{//代码…

turtle.circle() 函数绘制弧形规律助记图 ← Python

【Python 之 turtle.circle() 函数定义】 定义:turtle.circle(radius, extent)作用:根据半径 radius 绘制 extent 角度的弧形参数:radius :弧形半径当 radius 值为正数时,圆心在当前位置/小海龟左侧。当 radius 值为负…

9月美联储决策前哨战——美国CPI数据来袭

随着本周关键CPI数据的即将发布,市场正翘首以待,这将是美联储在9月17日至18日议息会议前获取的最后一块重要经济拼图。鉴于美联储官员已进入传统的政策静默期,8月份的CPI报告无疑将成为交易员们评估未来货币政策走向的重要标尺。 欧洲央行降…

16. MyBatis的延迟加载机制是什么?如何配置?有哪些优缺点?

延迟加载(Lazy Loading)是MyBatis提供的一种机制,用于优化数据库查询性能。在启用延迟加载时,某些关联对象或集合只有在被实际访问时才会触发数据库查询,而不是在主对象加载时立即加载。这种机制可以减少不必要的数据库…

Logstash 配置Java日志格式的方法

Logstash 是用于日志收集的开源工具,通常与 Elasticsearch 和 Kibana 一起使用,形成 ELK Stack(现在称为 Elastic Stack)。Logstash 非常灵活,可以通过配置文件(通常是 .conf 文件)来定义数据的…

AI模型:追求全能还是专精?-- 之5 “机器人”最终会成为“人类”的主导者吗?--答案是:不会!

Q1、先回顾一下:我们正在设计的是 一个变形机器人(变形金刚Transformers)。它是作为三种机器人(移动机器人Robot、代理机器人Agent和人形机器人Android )的共同原型(可以视为“祖先”--上述三者的祖传代码&…

[000-01-002].第03节:Git基础命令

我的博客大纲 我的GIT学习大纲 1、Git的常用命令 2、Git操作步骤: 2.1.操作Git第一步:设置全局的用户签名 1.设置用户名: 格式:git config --global user.name 用户名命令:git config --global user.name root 2.设置…

Taro + Vue 的 CSS Module 解决方案

一、开启模块化配置 Taro 中内置了 CSS Modules 的支持,但默认是关闭的。如果需要开启使用,请先在编译配置中添加如下配置: weapp: {module: {postcss: {// css modules 功能开关与相关配置cssModules: {enable: true, // 默认为 false&…

vue3中动态引入本地图片的两种方法

方法一 <img width"10" height"10":src"/src/assets/nncs2/jiantou${index 1}.png" alt"" /> 推荐 简单好用 方法二 const getImg index > {const modules import.meta.glob(/assets/nncs2/**/*.{png,svg,jpg,jpeg}, { …

如何解决户用光伏项目管理难题?

户用光伏作为分布式能源的重要组成部分&#xff0c;正迎来前所未有的发展机遇。户用光伏项目的复杂性和多样性也给项目管理带来了诸多挑战&#xff0c;包括客户分散、安装周期长、运维难度大、数据监控不及时等问题。为解决这些难题&#xff0c;构建一套高效、智能的户用光伏业…

SpringMVC基于注解使用:国际化

01-国际化介绍 首先在bootstrap下载个页面 下载后把登录页面的代码粘上去 然后再登录页面代码上有些超链接需要再spring-mvc.xml里面配置下&#xff0c;登录页面才能正常显示 配置静态资源 国际化-根据浏览器语言国际化 现在是中文的情况&#xff0c;要改为英文 1.配置下属…

【网络】DNS

definition DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;服务器是互联网上的重要基础设施之一&#xff0c;它的主要作用是将人们易于记忆的域名&#xff08;如www.example.com&#xff09;转换成计算机可以直接识别的IP地址&#xff08;如192.0.2.1&am…

OFDM信号PARP的CCDF图

文章目录 引言代码代码疑难解答参考文献 引言 本书主要参考了文献1&#xff0c;但实际上该书中符号和表述的错误非常多&#xff08;只能说棒子是这样的&#xff09;&#xff1b;同时因为发表时间的关系&#xff0c;很多MATLAB代码进行了更新&#xff0c;原书提供的代码已经无法…

Flutter中自定义气泡框效果的实现

在用户界面的设计中&#xff0c;气泡框&#xff08;Bubble&#xff09;是一种非常有效的视觉工具&#xff0c;它可以用来突出显示信息或提示用户。气泡框广泛应用于聊天应用、通知提示等场景。在 Flutter 中&#xff0c;虽然有很多现成的气泡框组件&#xff0c;但如果你想要更多…

使用豆包MarsCode 编写 Node.js 全栈应用开发实践

以下是「豆包MarsCode 体验官」优秀文章&#xff0c;作者狼叔。 欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等&#xff0c;【有奖征集&#xff5c;人人都是豆包MarsCode 测评官&#xff01;】活动正在火热进行中&#xff0c;欢迎大家投稿参加&a…

跨部门SOP与统一知识库:打破信息孤岛,促进团队协作

引言&#xff1a; 在当今这个快速变化且高度竞争的商业环境中&#xff0c;企业面临着前所未有的挑战&#xff0c;其中之一便是如何高效地跨越部门界限&#xff0c;实现无缝协作。传统的组织结构往往导致信息孤岛的出现&#xff0c;不同部门间流程不一致、信息不共享&#xff0…

openvas、gvmd、aide、ossec、clamav这些软件的用途

这些软件都是用于网络和系统安全的工具&#xff0c;各自有不同的用途&#xff1a; OpenVAS: OpenVAS&#xff08;Open Vulnerability Assessment System&#xff09;是一个开源的漏洞扫描工具。它用于扫描系统和网络中的安全漏洞&#xff0c;识别潜在的安全风险&#xff0c;并提…

Java中HashMap 和 ConcurrentHashMap

HashMap 和 ConcurrentHashMap 都是 Java 中用来存储键值对的集合类&#xff0c;但它们有不同的设计目标&#xff0c;适用于不同的场景。以下是它们的详细对比和介绍。 ### 1. HashMap 概述 HashMap 是基于哈希表的非同步集合类&#xff0c;主要用于在单线程环境下存储键值对。…

【车载开发系列】ParaSoft单元测试环境配置(一)

【车载开发系列】ParaSoft单元测试环境配置(一) ParaSoft单元测试环境配置 【车载开发系列】ParaSoft单元测试环境配置(一)一. 什么是bdf文件二. bdf文件构成三. 新规做成bdf文件四. 导入bdf文件创建测试工程五. 获取编译器信息六. 新增自定义编译器Step1:打开向导Step2:…