旧设备和平台上的字体不一致，设计元素有时会中断答案

【问题标题】：Font isn't consistent on the old devices and platforms, and design elements break sometimes旧设备和平台上的字体不一致，设计元素有时会中断
【发布时间】：2019-08-12 10:24:43
【问题描述】：

我正在尝试统一字体以在所有操作系统和设备上显示相同。还有一些设计元素在不同的设备上中断。我究竟做错了什么？这是我下面的代码？

<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
  <tr>
    <td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
        <img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">

        </td>
      <td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
    <span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
    </tr>
    <tr height="10px" width="200px">
      <td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px"><a href="tel:0430000000" style="text-decoration: none;color: black; font-family: 'sans-serif', 'lato';">0000 000 000</a></p></td>
      <td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px"><a href="tel:0000000000" style="text-decoration: none; color: black; font-family: 'sans-serif', 'lato';">08 6263 5253</a></p></td>
  </tr>
    <tr>
    <td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px"><a href="https://goo.gl/maps/G5qdX7BeFz6HY7Rv6" style="text-decoration: none;color: black">20 Wynyard St, Belmont WA 6104</a></p>
      <p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px"><a href="westcoastelevators.com.au" style="text-decoration: none;color: black; font-weight: bold;">westcoastelevators.com.au </a></p></td>
    <td width="180" ><a href="https://www.facebook.com/westcoastelevatorsperth/"><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"></a> <a href="http://www.instagram.com/westcoast_elevators/"><img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></a></td></tr>


    </tbody>

</table>

【问题讨论】：

首先'sans-serif'和sans-serif有很大区别。其次，并非所有平台都有'Lato' 字体，sans-serif 使用什么字体取决于用户设置。如果您想确保在所有平台上使用相同的字体，唯一的选择就是 webfont。
那么您认为解决方案是将字体系列标签调整为 font-family: 'Lato', sans-serif.然后在标题中添加一个链接到
是的。但我不确定您所说的“设计元素中断”是什么意思。能举个例子吗？
我在最后加入了社交标志，当它在小屏幕上查看时，它们只是相互叠加。

标签： html css email signature

【解决方案1】：

这是解决跨浏览器/平台字体问题的好工具：https://google-webfonts-helper.herokuapp.com/fonts/ 尝试从这里下载字体，然后将其导入 css 文件。

【讨论】：

【解决方案2】：

要使字体在任何地方都保持不变，您必须使用李斯特先生所说的网络字体。您可以从 Internet 上获取字体，但目前最好从 here 获取字体。

例如，在选择字体后，您可以将其导入 HTML 或 CSS。对于 HTML：

<body>
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>

或

<style>
    @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>

对于 CSS：

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

然后在您的代码中使用它（注意：在看到您在代码中尝试执行的操作后，我会这样做）：

<style>
  @import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

  .p {
    font-family: "Lato", sans-serif;
  }
  <!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>

但是，我强烈建议您研究外部 CSS。这将使您的代码更易于使用。

【讨论】：