vue项目设置活性字体过程(自适应字体大小)

目录
  • vue项目设置活性字体
    • 起因
    • 我们来看看详细步骤吧
    • 效果
  • vue项目引入特殊字体
    • 特殊字体指的是默认电脑中没有的

vue项目设置活性字体

起因

最近，博主在按照ui设计稿参数编写页面之后，发现页面整体偏大，尤其是字体现实的特别大，但是在按UI设计的页面尺寸展示的时候却十分舒服，这是怎么回事，在和另一位前端交流之后，得知可以动态设置字体大小，即不同页面有不同的大小的字体十分灵活。

首先，我们要清楚字体设置比较常用的三个单位px，rem，em

  • px是一个大小单位，相当于1像素，这要写死就是固定的；
  • rem,em两者都是比例单位，只是相对比的对象不同：
  • em是相对于父级的，父级字体设置20px，子级设置0.5em，即20* 0.5=10px,

而rem是相对于根的，根设置字体30px，我设置0.5rem，即30* 0.5=15px。

而这里我们设置活性字体需要设置一个全局的字体，也就是根的字体大小，这里博主将html设成根

我们来看看详细步骤吧

步骤1：

在vue的App.vue页面设置全局字体大小

mounted() {
      let width=$("body").width();
      if(width>=1200){
        let fontsize=width/1920*40;//fontsize为当前屏幕的基数字体，相对于设计稿计算得到的。
        $("html").css("font-size",`${fontsize}px`)
      }//当加载页面的时候设置生效
      window.onresize = () => {//当页面尺寸改变的时候生效
        return (() => {
          let width=$("body").width();
          if(width>=1200){
            let fontsize=width/1920*40;
            $("html").css("font-size",`${fontsize}px`)
          }
        })()
      }
    }

因为博主页面可视部分大小是1200px，所以这边设置了范围1200px以上

效果

步骤2：

根据基数字体设置相应字体大小rem为单位

比如：基数为40px，20px相对于40px就是0.5rem，只要你将20px地方改成0.5rem即可。

如果你不想计算可以采用公式：

font-size:calc(20 * 1rem / 40);

calc是css中动态设置长宽高，间距等等。需要注意的是运算符两边要有空格，不然不会生效。

总结： 这样页面上的字体就可以随着你的屏幕大小设置成相应字体大小，不会再有按照设计稿设置，字体太大的问题了。博主在编写的时候发现，既然字体px可以使用这个，那间距等等也可以动态设置，我自己称为活性间距，屏幕越小，字体越小，间距越小。这样子编写，基本可以是设计稿参数的等比例缩放，在视觉上可以更舒服。

vue项目引入特殊字体

特殊字体指的是默认电脑中没有的

1、下载字体

2、新建文件夹font，把字体放进去

3、新建font.css

4、使用@font-face设置字体

@font-face {
  font-family: 'txchj'; // txchj 我自己定义的
  src: url("~@/assets/font/txchj.ttf"); // 路径自己调整
}

5、main.js引入font.css

6、组件中就可以使用了

.header-title{
    line-height: 75px;
    font-family: 'txchj';
    font-size: 34px;
    margin-left: 56px;
    color: #62c7e0;
    letter-spacing: 1.3px;
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 引用自定义ttf、otf、在线字体的方法

    1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹,之后也可以用于存放一些公共的样式文件.再新建一个 index.less 文件,引入字体. @font-face { font-family: Snickles; src: url('../assets/Snickles-webfont.ttf'); } @font-face { font-family: Ronda; src: url('../assets/

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • vue项目中Toast字体过小,没有边距的解决方案

    vue项目中Toast字体过小,没有边距的解决方案

    目录 vue Toast字体过小,没有边距 解决办法 vue使用Toast最简单方式 1.安装并引入mint-ui 2.引入Toast 3.使用Toast vue Toast字体过小,没有边距 1.前段时间在写项目的时候使用 vant 组件库比较多,在使用vant中Toast时,在Chrome中手机模拟中测试正常,但是当网页放到手机中时字体显示特别小,但是你在vue文件中怎么添加样式都没有用: 2.问题的原因可能是我之前写的那种rem适配方案的问题: 解决办法 在项目 App.vue 文件中添加

  • Vue项目中使用自定义字体样式方式

    目录 Vue使用自定义字体样式 步骤一 步骤二 步骤三 步骤四 全局自定义字体,提高项目字体美化 1.创建font文件夹 2.创建index.css 3.全局注册 4.页面使用 Vue使用自定义字体样式 步骤一 拿到自定义字体包 首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二 在项目文件夹中进行放置自定义字体包的配置 在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中: 新建一个font.c

  • vue中响应式布局如何将字体大小改成自适应

    目录 响应式布局将字体大小改成自适应 vue文字大小自适应问题 响应式布局将字体大小改成自适应 1.在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() {     // 页面开始加载时修改font-size     var html = document.getElementsByTagName("html")[0];     var oWidth = document.body.clientWidth || document.doc

  • vue-quill-editor如何设置字体大小

    目录 vue-quill-editor设置字体大小 vue-quill-editor 样式问题 vue-quill-editor设置字体大小 项目中需要用到富文本编辑器,用的Vue,所以选择了vue-quill-editor这个富文本编辑器,发现字体只有几种大小可以选择,满足不了产品的需求,研究了半天终于改好了.主要是需要更改配置文件,以及对应的CSS和js文件. editor.vue 页面下改变 toolbarOptions的配置项 (editor.vue就是封装的富文本编辑器) const

  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    目录 vue项目设置活性字体 起因 我们来看看详细步骤吧 效果 vue项目引入特殊字体 特殊字体指的是默认电脑中没有的 vue项目设置活性字体 起因 最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定

  • vue项目在webpack2实现移动端字体自适配功能

    使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 px2rem-loader 插件:npm install px2rem-loader --save: b. 安装 lib-flexible 插件:npm install lib-flexible --save; 2 插件的作用: px2rem-loader插件的作用:我们通过配置基准,实现将px自动换算成

  • 脚手架(vue-cli)创建Vue项目的超详细过程记录

    脚手架(vue-cli)创建Vue项目的超详细过程记录

    目录 cli3.x/4.x创建Vue项目 1.创建项目 2.项目手动配置 3.选择vue版本 4.路由模式 5.配置文件的存放位置 6.配置保存 项目创建成功 总结 cli3.x/4.x创建Vue项目 1.创建项目 vue create vue_project(项目名) 敲击回车,出现以下页面 此处本人一般选择手动配置,因为eslint真的是个很可怕的东西,它对代码格式的严格要求,真的会把人逼疯的,代码有一点点不规范的地方程序都会报错 2.项目手动配置 按空格键选择或取消选择 3.选择vue版本

  • 基于vue项目设置resolves.alias: '@'路径并适配webstorm

    基于vue项目设置resolves.alias: '@'路径并适配webstorm

    在webpack的配置项中添加下面代码 function resolve (dir) { return path.join(__dirname, dir) } webpackConfig = { resolve: { alias: { '@': resolve('src') } } } 然后再设置一下下,在你的IDE中按住CTRL就能根据路径跳转到对应文件了 描述: ctrl+alt+s 搜索 webpack 然后选择\node_modules\@vue\cli-service\webpack.

  • vue项目设置scrollTop不起作用(总结)

    今天在开发中,遇到这样一个情景.一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置. 我想的方案是获取到每个模块距离文档顶部的距离,然后将值赋给对应要滚动的元素. 步骤如下: 首先给每个模块一个id,例如: <div class="module module1" id="anchor-0"> <div class="module module1" id="a

  • vue项目引入字体.ttf的方法

    1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • Js动态设置rem来实现移动端字体的自适应代码

    下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

随机推荐