vue項目設置活性字體過程(自適應字體大小)

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

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

vue項目設置活性字體

起因

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

首先，我們要清楚字體設置比較常用的三個單位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為當前屏幕的基數(shù)字體，相對于設計稿計算得到的。
        $("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：

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

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

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

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

calc是css中動態(tài)設置長寬高，間距等等。需要注意的是運算符兩邊要有空格，不然不會生效。

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

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: