Vue中v-for渲染li字体正常，新增独立li字体异常问题求助

在Vue项目里，通过v-for循环渲染的<li>元素font-family显示正常，但手动添加的同级<li>却使用系统默认字体族，已确认font-family定义正确。

相关代码 #

Vue模板 #

<ul class="menu-list">
  <li
    v-for="(i, index) in ROUTES_INFO"
    :key="index"
    :class="{ active: active === index }"
    @click="swiper?.slideTo(index)"
  >
    <span class="menu-title">{{ i.meta.title }}</span>
    <div class="menu-subtitle">{{ i.meta.name }}</div>
  </li>
  <!-- 这个li字体显示异常 -->
  <li>
    <span class="menu-title">充值中心</span>
    <div class="menu-subtitle">PAYMENT</div>
  </li>
</ul>

CSS代码 #

li {
  padding-left: vh(16);
  height: vh(72);
  width: vh(150);
  font-size: vh(18);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  font-family: RuiXian;
}

排查与解决方法 #

• 字体加载时机问题
  手动添加的静态<li>可能在自定义字体RuiXian加载完成前就已渲染，而v-for的元素是数据驱动，渲染时机可能滞后于字体加载。可以给CSS添加字体回退，同时确认字体文件引入正确：

  /* 添加字体回退 */
  li {
    font-family: RuiXian, sans-serif;
  }
  
  /* 确保@font-face定义正确 */
  @font-face {
    font-family: 'RuiXian';
    src: url('你的字体路径/RuiXian.woff2') format('woff2'),
         url('你的字体路径/RuiXian.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  

• CSS优先级冲突
  检查Chrome调试工具中手动添加的<li>的font-family计算值，看是否被其他更高优先级的样式覆盖。如果是，提升当前样式的优先级：

  /* 通过父类选择器提升优先级 */
  .menu-list li {
    font-family: RuiXian;
  }
  

• 统一渲染逻辑
  将手动添加的<li>改为数据驱动，加入ROUTES_INFO数组，用v-for统一渲染，确保样式应用逻辑一致：

  // 在数据源中添加充值中心条目
  ROUTES_INFO.push({
    meta: {
      title: '充值中心',
      name: 'PAYMENT'
    }
  })
  

内容的提问来源于stack exchange，提问作者x w