字体自适应

本项目的UI童鞋坐标日本分公司，估摸着和我一样也是初次对邮件进行设计，对于设计稿只出了PC版，字体最大有66px，因为时间仓促，无法赶出mobile版本设计稿，只能simply按比例缩小字体写进media query来适配。

按照比例来生成font.mjml

*假设你已经知道如何将类应用到mj元素上

时间仓促，我就简单的写了一个font.js，然后插入在网页上，复制粘贴至font.mjml。

const getFontSize = (fontSize, screenSize) => (screenSize / 600) * fontSize; //屏幕÷设计稿宽度×设计稿文字大小

const renderFontStyle = (type) => {
  const screens = [600, 375]; //pc屏幕600，mobile 375为基准的文字大小，然后屏幕小于480的时候便认为是mobile
  const breakpoints = [600, 480]; 

  let screen = screens[type];
  let breakpoint = breakpoints[type];

  return ` <mj-style ${type ? "" : `inline="inline"`}>
    ${type ? `@media only screen and (max-width:${breakpoint}px) {` : ""}
      .f-66 div {
         font-size: ${getFontSize(66, screen)}px !important;
      }

      .f-48 div {
        font-size: ${getFontSize(48, screen)}px !important;
     }
     ${type ? `}` : ""}
     </mj-style>
    `;
};

先大致预览设计稿，导出至Zeplin，然后查看要用到的字体，写在js的return语句中，最后手动生成Mjml文件，当然，有时间伙伴们可以尝试下用node.js来生成这个文件。

字体class写法注意事项

如果你没有了解过Mjml，请先移步通读 Mjml documentation，并且 try it live 查看mjml生成了什么。
假设你写了 .foo { font-size: 16px;} 这个class，然后应用到<mj-text>标签里属性css-class="foo"却没有生效。
首先因为在任何类的属性后面需要加上!important，其次这个类是应用到了<td>标签上而不是文字节点的父节点的<div>上，因此要写成：

.foo div { font-size: 16px!important;}

如果父节点是<a>标签，那么写成：

.foo a { font-size: 16px!important;}

如果父节点是其他标签，那么就改成其他标签试试。如果你try it live你就会更加清楚你写的东西是如何应用在html上。