如何实现多端字体样式尺寸一致及移除移动端邮箱默认样式？

Hey Mathias, 刚好我对这两个前端样式问题很熟悉，给你整理了实用的解决方法：

要实现字体跨设备一致，核心是从字体选择、样式重置、尺寸单位这几个方面入手：

• 选对字体方案

  • 如果你想完全自定义字体，用@font-face嵌入字体文件，记得包含多种格式保证兼容性，同时加上font-display: swap避免加载时出现空白：

    @font-face {
      font-family: 'YourCustomFont';
      src: url('your-font.woff2') format('woff2'),
           url('your-font.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    

  • 追求兼容性和加载速度的话，用系统字体栈，让字体匹配用户设备的默认字体，视觉更和谐：

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    

• 重置浏览器默认样式
  不同浏览器对字体的默认样式（比如行高、字重）有差异，用CSS统一重置：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'YourCustomFont', -apple-system, BlinkMacSystemFont, sans-serif; /* 把自定义字体和系统栈结合 */
  }
  

  如果你不想太激进，也可以用normalize.css的思路，只修正不一致的默认样式，保留浏览器的合理默认值。

• 用相对单位控制字体尺寸
  别用固定的px，改用rem或vw这类相对单位，让字体尺寸随设备适配：

  html {
    font-size: 62.5%; /* 把根字体设为10px，方便计算（1rem=10px） */
  }
  body {
    font-size: 1.6rem; /* 相当于默认的16px，符合用户习惯 */
  }
  

  这样在不同分辨率的设备上，字体都会按比例缩放，保持视觉一致性。

移动端浏览器会自动识别文本中的邮箱地址，把它转成带默认样式的mailto:链接，解决方法有两种：

• 直接修改邮箱链接的样式
  针对自动生成的mailto:链接，写CSS覆盖默认样式：

  a[href^="mailto:"] {
    color: inherit; /* 继承父元素的文字颜色 */
    text-decoration: none; /* 移除下划线 */
    /* 如果不需要邮箱跳转功能，再加这句禁止点击 */
    /* pointer-events: none; */
  }
  

• 禁止浏览器自动识别邮箱
  在HTML的<head>里加一个meta标签，让浏览器不再把纯文本邮箱转成链接：

  <meta name="format-detection" content="email=no">
  

  这个方法更彻底，适合不需要邮箱跳转功能的场景。

如果是你自己手动写的mailto:链接，直接给对应的a标签加类名，设置自定义样式就行啦！

希望这些方法能帮你解决问题 😊

内容的提问来源于stack exchange，提问作者Mathias Brandenburger