快捷導(dǎo)航

vue項(xiàng)目設(shè)置活性字體過程(自適應(yīng)字體大小)

更新時(shí)間：2022年09月19日 09:20:08 作者：LIMI_傘夢

這篇文章主要介紹了vue項(xiàng)目設(shè)置活性字體過程(自適應(yīng)字體大小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目設(shè)置活性字體

起因

最近，博主在按照ui設(shè)計(jì)稿參數(shù)編寫頁面之后，發(fā)現(xiàn)頁面整體偏大，尤其是字體現(xiàn)實(shí)的特別大，但是在按UI設(shè)計(jì)的頁面尺寸展示的時(shí)候卻十分舒服，這是怎么回事，在和另一位前端交流之后，得知可以動(dòng)態(tài)設(shè)置字體大小，即不同頁面有不同的大小的字體十分靈活。

首先，我們要清楚字體設(shè)置比較常用的三個(gè)單位px，rem，em

px是一個(gè)大小單位，相當(dāng)于1像素，這要寫死就是固定的；
rem,em兩者都是比例單位，只是相對(duì)比的對(duì)象不同：
em是相對(duì)于父級(jí)的，父級(jí)字體設(shè)置20px，子級(jí)設(shè)置0.5em，即20* 0.5=10px,

而rem是相對(duì)于根的，根設(shè)置字體30px，我設(shè)置0.5rem，即30* 0.5=15px。

而這里我們?cè)O(shè)置活性字體需要設(shè)置一個(gè)全局的字體，也就是根的字體大小，這里博主將html設(shè)成根

我們來看看詳細(xì)步驟吧

步驟1：

在vue的App.vue頁面設(shè)置全局字體大小

mounted() {
      let width=$("body").width();
      if(width>=1200){
        let fontsize=width/1920*40;//fontsize為當(dāng)前屏幕的基數(shù)字體，相對(duì)于設(shè)計(jì)稿計(jì)算得到的。
        $("html").css("font-size",`${fontsize}px`)
      }//當(dāng)加載頁面的時(shí)候設(shè)置生效
      window.onresize = () => {//當(dāng)頁面尺寸改變的時(shí)候生效
        return (() => {
          let width=$("body").width();
          if(width>=1200){
            let fontsize=width/1920*40;
            $("html").css("font-size",`${fontsize}px`)
          }
        })()
      }
    }

因?yàn)椴┲黜撁婵梢暡糠执笮∈?200px，所以這邊設(shè)置了范圍1200px以上

效果

步驟2：

根據(jù)基數(shù)字體設(shè)置相應(yīng)字體大小rem為單位

比如：基數(shù)為40px，20px相對(duì)于40px就是0.5rem，只要你將20px地方改成0.5rem即可。

如果你不想計(jì)算可以采用公式：

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

calc是css中動(dòng)態(tài)設(shè)置長寬高，間距等等。需要注意的是運(yùn)算符兩邊要有空格，不然不會(huì)生效。

總結(jié)： 這樣頁面上的字體就可以隨著你的屏幕大小設(shè)置成相應(yīng)字體大小，不會(huì)再有按照設(shè)計(jì)稿設(shè)置，字體太大的問題了。博主在編寫的時(shí)候發(fā)現(xiàn)，既然字體px可以使用這個(gè)，那間距等等也可以動(dòng)態(tài)設(shè)置，我自己稱為活性間距，屏幕越小，字體越小，間距越小。這樣子編寫，基本可以是設(shè)計(jì)稿參數(shù)的等比例縮放，在視覺上可以更舒服。

vue項(xiàng)目引入特殊字體

特殊字體指的是默認(rèn)電腦中沒有的

1、下載字體

2、新建文件夾font，把字體放進(jìn)去

3、新建font.css

4、使用@font-face設(shè)置字體

@font-face {
  font-family: 'txchj'; // txchj 我自己定義的
  src: url("~@/assets/font/txchj.ttf"); // 路徑自己調(diào)整
}

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;
  }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: