浏览代码

perf(base-L11): App.vue 与 design/default.less 的 @font-face 增加 font-display: swap

86132 1 周之前
父节点
当前提交
d2601c76a5
共有 2 个文件被更改,包括 5 次插入0 次删除
  1. 4 0
      src/App.vue
  2. 1 0
      src/design/themify/default.less

+ 4 - 0
src/App.vue

@@ -75,23 +75,27 @@
     src: url('/@/assets/font/douyuFont.otf');
     src: url('/@/assets/font/douyuFont.otf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
+    font-display: swap; // [perf-base-v1] 字体加载期间先用系统字体渲染,避免不可见文本阻塞
   }
   }
   @font-face {
   @font-face {
     font-family: 'numberFont';
     font-family: 'numberFont';
     src: url('/@/assets/font/yjsz.TTF');
     src: url('/@/assets/font/yjsz.TTF');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
+    font-display: swap; // [perf-base-v1] 字体加载期间先用系统字体渲染,避免不可见文本阻塞
   }
   }
   @font-face {
   @font-face {
     font-family: 'electronicFont';
     font-family: 'electronicFont';
     src: url('/@/assets/font/DS-DIGIT.TTF');
     src: url('/@/assets/font/DS-DIGIT.TTF');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
+    font-display: swap; // [perf-base-v1] 字体加载期间先用系统字体渲染,避免不可见文本阻塞
   }
   }
   @font-face {
   @font-face {
     font-family: 'ysbtFont';
     font-family: 'ysbtFont';
     src: url('/@/assets/font/ysbtFont.ttf');
     src: url('/@/assets/font/ysbtFont.ttf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
+    font-display: swap; // [perf-base-v1] 字体加载期间先用系统字体渲染,避免不可见文本阻塞
   }
   }
 </style>
 </style>

+ 1 - 0
src/design/themify/default.less

@@ -2,6 +2,7 @@ html {
   @font-face {
   @font-face {
     font-family: 'douyuFont';
     font-family: 'douyuFont';
     src: url('@/assets/font/douyuFont.otf');
     src: url('@/assets/font/douyuFont.otf');
+    font-display: swap; // [perf-base-v1] 字体加载期间先用系统字体渲染,避免不可见文本阻塞
   }
   }
   // html[data-theme='vent1'] {
   // html[data-theme='vent1'] {
   --vent-primary-color: #1580cc;
   --vent-primary-color: #1580cc;