如何将页面所有字体大小统一缩小20%（非em单位）

这个问题我之前做国际化项目时也碰到过！日语汉字的视觉大小确实比西文字符突出，统一缩小20%的需求很合理。你遇到的em、80%失效的问题，根源是CSS相对单位的特性和使用方式不对，下面给你几个靠谱的解决方案，从Sass到Vue/原生JS都有：

一、最省心的CSS原生方案：用rem单位统一控制 #

rem是相对于根元素(<html>)的字体大小，只要把页面所有元素的font-size都用rem定义，日语模式下只需要修改根元素的字体大小，就能让所有元素同步缩小20%，完全不会有em的叠加问题。

实现步骤： #

1. 先设置根元素的默认字体大小：

html {
  font-size: 16px; /* 浏览器默认字体大小，也可以根据设计稿调整 */
}

2. 页面所有元素用rem定义字体：

h1 { font-size: 2.5rem; } /* 对应16*2.5=40px */
h2 { font-size: 2rem; }   /* 对应32px */
p { font-size: 1rem; }    /* 对应16px */
/* 其他元素同理，都用rem */

3. 日语模式下修改根元素字体（假设切换日语时给<html>加lang-ja类）：

html.lang-ja {
  font-size: 80%; /* 直接是默认大小的80%，无需计算具体像素 */
}

这样切换到日语时，所有用rem的元素都会自动缩小20%，完美符合需求！

二、Sass(scss)方案：统一变量+批量生成缩小样式 #

如果你的项目已经用Sass变量管理所有字体大小，可以通过遍历变量的方式，批量生成日语模式下的缩小样式，避免重复写代码。

实现代码： #

// 1. 定义所有基础字体变量
$base-font: 16px;
$font-sizes: (
  h1: $base-font * 2.5,
  h2: $base-font * 2,
  p: $base-font,
  .text-small: $base-font * 0.875
);

// 2. 生成默认样式
@each $selector, $size in $font-sizes {
  #{$selector} {
    font-size: $size;
  }
}

// 3. 生成日语模式下的缩小样式（给body加.lang-ja类）
body.lang-ja {
  @each $selector, $size in $font-sizes {
    #{$selector} {
      font-size: $size * 0.8;
    }
  }
}

这种方式的好处是，只要维护好$font-sizes变量，默认样式和日语样式会自动同步，后期修改字体大小也只需要改一处。

三、JS/Vue方案：动态切换类名（配合CSS） #

如果需要通过JS控制语言切换，最简洁的方式不是直接修改元素字体，而是动态给根元素添加/移除日语类名，配合前面的CSS方案即可。

Vue实现（结合Vue-i18n）： #

假设你用Vue-i18n做国际化，可以监听语言变化来切换类名：

import { createI18n } from 'vue-i18n';

// 初始化i18n
const i18n = createI18n({
  locale: 'en', // 默认语言
  messages: {
    en: { /* 英文语言包 */ },
    ja: { /* 日语语言包 */ }
  }
});

// 监听语言切换
i18n.global.watch('locale', (newLocale) => {
  const htmlEl = document.documentElement;
  if (newLocale === 'ja') {
    htmlEl.classList.add('lang-ja');
  } else {
    htmlEl.classList.remove('lang-ja');
  }
});

export default i18n;

原生JS实现： #

如果是纯原生项目，给切换按钮绑定事件即可：

const langSwitchBtn = document.getElementById('lang-switch-btn');

langSwitchBtn.addEventListener('click', () => {
  const htmlEl = document.documentElement;
  const isJapanese = htmlEl.classList.contains('lang-ja');
  
  if (isJapanese) {
    htmlEl.classList.remove('lang-ja');
    htmlEl.setAttribute('lang', 'en');
  } else {
    htmlEl.classList.add('lang-ja');
    htmlEl.setAttribute('lang', 'ja');
  }
});

为什么你之前的方法失效？ #

• em单位：em是相对父元素的字体大小，嵌套元素会叠加缩小比例（比如父元素设0.8em，子元素再设0.8em就变成0.64em），导致各元素缩小程度不一致。
• font-size:80%：如果直接给每个元素加，会和em一样有叠加问题；如果给body加，页面中用固定px的元素不会受影响，所以看起来无效。
• calc(auto - 20%)：auto是关键字，不能参与calc的数值运算，所以这个写法本身就是无效的。

内容的提问来源于stack exchange，提问作者Juliana Villegas