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

起因

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

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

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

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

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

我們來看看詳細步驟吧

步驟1：

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

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

因為博主頁面可視部分大小是1200px，所以這邊設(shè)置了范圍1200px以上

效果

步驟2：

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

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

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

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

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

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

vue項目引入特殊字體

特殊字體指的是默認電腦中沒有的

1、下載字體

2、新建文件夾font，把字體放進去

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

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

最新評論