在我上一篇关于电子邮件模板布局基础的文章中，我介绍了电子邮件模板的结构和不同区域。在这篇文章中，我们将讨论字体系列、字体大小、颜色和样式。字体系列您在电子邮件中使用的字体应与您在网站上使用的字体相同或相似。不同的计算机安装了不同的字体集。如果您在网站上使用自定义字体，您可能无法在电子邮件中使用相同的字体。许多电子邮件客户端不允许导入自定义字体，因此，如果您在电子邮件中使用自定义字体，并且有人在不支持自定义字体的计算机上打开它，它将默认为通用字体。如果自定义字体不可用，这将影响间距和文本换行。例如，如果一行自定义文本不换行，通用字体可能会在电子邮件中添加一行文本。无衬线衬线等距宋体佐治亚州信使海尔维提卡帕拉蒂诺露西达格兰德新罗马时代宋体信使日内瓦投石机MS威尔达纳如果你在你的网站上为标题和段落文字使用不同的字体，学习大数据，在你的电子邮件中也要这样做。字体大小好的设计的关键之一是一致性，所以你使用的字体大小在你的网站和电子邮件中保持一致是很重要的。对于段落或普通文本，云服务服务器，请使用与网站上相同的字体大小。这可能在11像素到16像素之间。除了段落文本，您应该有四个较大的类型对应标题类型H1、H2、H3和H4。标题大小应根据段落字体大小而变化。你可能还记得高中几何中的黄金比例（约1.6）。它经常出现在数学、艺术、自然和网页设计中，所以在你的电子邮件模板中使用它也是有意义的。下表将帮助您找到适合模板的标题大小。段落标题4标题3标题2标题111像素18像素28像素45像素72像素12像素19像素31像素49像素78像素13像素21像素33像素53像素85像素14像素22像素36像素57像素91像素15像素24像素38像素61像素98像素16像素26像素41像素65像素105像素尽管上表显示了五种不同的字体大小，但您不必使用比H3标题更大的字体，因为H1标题和段落文本之间的大小会有明显的差异。如果你在H3之后需要附加标题，那么你可以转到H2和H1。总共只能使用两到三个字号。同样，您可以使用图片标题或预告片文本的黄金比例缩小段落文本。颜色为了保持一致，电子邮件中的调色板应该与网站的调色板相匹配。电子邮件中颜色重要的区域包括：电子邮件背景内容背景导航栏页脚按钮链接文本我们在上一篇文章中讨论了如何选择电子邮件和内容背景颜色。如果你的电子邮件内容背景为白色，物联网管理平台，请使用黑色或深灰色文本。作为一个提醒，避免使用"纯"黑色，而是使用一个非黑色。对链接或按钮使用颜色会引起人们对它们的注意。除非你的网站完全是灰度级的，否则把你网站上的主要颜色合并到你的电子邮件模板中。色彩在少用的时候特别有效，因为它们会与黑白对决。另一方面，如果你使用了太多的颜色，你的模板会显得很忙，并且会分散接收者对你想引起注意的主要区域的注意力。请注意，在下面的图片中，按钮在右侧的模板中更加突出。设置按钮和边框的样式您应该在模板中包含的站点中的另一个样式元素是用于按钮的边框半径。您的网站使用两种按钮样式之一：圆形或方形。如果你的网站上的按钮使用了一个小的边界半径-例如2倍-使用这个按钮在你的电子邮件。您也可以选择在电子邮件内容区域周围添加边框。虽然内容区域必须是矩形的，怎么做淘客推广，但如果这是您在网站上使用的样式，则可以使用圆形边框。下面，您可以看到圆形和方形按钮之间的视觉区别。结论结合我们的布局指南，使用这些字体、颜色和样式提示，您将很好地创建外观漂亮的电子邮件模板。在第三部分中，我将继续我们的设计系列，发布一篇关于响应性、专栏等的文章，淘客小程序，敬请关注！你在电子邮件中使用哪种字体？请在评论中告诉我！交易营销电子邮件（信息图）使用新的Klaviyo表单生成器可以更轻松地构建弹出窗口Nomad如何将电子邮件营销收入从占总收入的2%增长到20%….yuzo_相关的图片{宽度：260px！重要的；高度：250px！重要；}.yuzo_相关的帖子。related thumb{行-高度：16px；背景: !重要；颜色：！重要；}.yuzo_相关的帖子atedthumb:悬停{背景：ffffff！重要信息；-webkit变换：背景0.2s线性；-moz变换：背景0.2s线性；-o-变换：背景0.2s线性；变换：背景0.2s线性；；颜色：！重要；}.yuzo_相关的帖子。related thumb a{颜色：#323b43！重要；}.yuzo_相关的帖子。relatedthumb a:悬停{color:}！重要；}.yuzo_相关的帖子atedthumb：悬停{颜色：！重要；}.yuzo_相关的帖子。yuzo_文本{颜色：！重要；}.yuzo_相关的帖子atedthumb：悬停。yuzo逯文本{颜色：！重要；}.yuzo_相关的帖子。relatedthumb{margin:0px 0px 0px 0px；填充：5px 5px 5px；}jQuery（document）.ready（函数（$）{//jQuery（'.yuzo_related_post'）.equalizer（{overflow:'relatedthumb'}）；jQuery（'.yuzo_related_post.yuzo_wrapps'）.equalizer（{columns:'>div}）；})返回博客主页