Vue项目 css下载字体并引入使用

这篇具有很好参考价值的文章主要介绍了Vue项目 css下载字体并引入使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue项目 css下载字体并引入使用,vue.js,css,前端

1.下载字体
        下载字体:字体下载,字体大全,免费字体下载,在线字体|字客网字客网是全球知名的字体下载与分享网站,齐全的中文,日文,韩文,英文,图标,美术设计,毛笔,钢笔,手写,书法字体大全,提供找字体,字体识别,字体下载,在线字体预览,字体转换,字体设计等服务。https://www.fontke.com/
        下载之后复制里边的.ttf 文件

Vue项目 css下载字体并引入使用,vue.js,css,前端

Vue项目 css下载字体并引入使用,vue.js,css,前端 

 

2.在assets添加一个文件夹text,自定义font.cssfont.ttf文件

3.下载之后复制里边的.ttf 文件更改名字直接替换font.ttf文件

Vue项目 css下载字体并引入使用,vue.js,css,前端

@font-face {

  font-family: 'CKTJGZT';  

  src: url('font.ttf');

  font-weight: normal;

  font-style: normal;

}

4.入口文件main.ts 文件全局引入 

Vue项目 css下载字体并引入使用,vue.js,css,前端

 import "./assets/text/font.css";

 5、页面中使用 //和css文件中的CKTJGZT保持一致

Vue项目 css下载字体并引入使用,vue.js,css,前端

 font-family: 'CKTJGZT'; 文章来源地址https://www.toymoban.com/news/detail-794173.html

到了这里,关于Vue项目 css下载字体并引入使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue项目使用Decimal.js做加减乘除求余运算

    运算结果是Decimal对象,需要使用.toNumber()转为数字

    2024年04月13日
    浏览(60)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(51)
  • vue3项目引入本地js文件,实现一个音频播放按钮

    目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引

    2024年02月19日
    浏览(57)
  • 前端笔记(Css、JS、Vue、UniApp、微信小程序)

    点击穿透 应用场景:点赞或送礼等出现的弹窗遮罩,无法再次触发点击事件 磨砂模糊 底部安全距离 可以放入【common.scss】中,在需要的页面引入 宽度根据内容决定 媒体查询@media 必须是以 @media 开头 使用 mediatype 指定媒体(设备)类型 使用 and | not | only 逻辑操作符构建复杂

    2024年04月26日
    浏览(42)
  • vue中 字体图标引入 - iconfont阿里字体图标库

    官网:iconfont-阿里巴巴矢量图标库 代码应用 中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推 )、symbol(svg合集)。本文主讲 font-class 方法。 支持ie8+,及所有浏览器 1. 获得项目下面的 fontclass 代码 加入库 - 选择完所需的图标后,右上

    2024年02月09日
    浏览(72)
  • NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入

    1.下载过程默认下一步 (1)这个是官网全版目录,下载太慢(一般下载不了);但是它写了所有nodejs和npm相互对应的版本,可以以此为参考、防止版本不对应; NodeJS各个历史版本下载 https://nodejs.org/zh-cn/download/releases/ (2)这里有一个快速下载地址,只有16.18.1这个版本,但这

    2023年04月18日
    浏览(55)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)
  • 【热门前端【vue框架】】——vue框架和node.js的下载和安装保姆式教程

    👨‍💻个人主页 :@程序员-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏 :vue框架开发   Vue.js 是一款流行的 JavaScript 前端框架,它以其简单、灵活和高效的特性,成为了构建现代化 Web 应用程序的首选工具

    2024年04月27日
    浏览(56)
  • 前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

    目录 1、项目中引入阿里矢量库图标 2、实现吸顶交互 3、语法糖--script setup 3.1、无需return  3.2、子组件接收父组件的值-props的使用 3.3、注册组件 步骤一 :进入阿里矢量库官网中:iconfont-阿里巴巴矢量图标库  ,挑选自己需要的图标:         我在查看其他博主的博客时

    2024年04月16日
    浏览(62)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包