Question

我正在通过phpmailer发送电子邮件，我需要添加外部字体。我尝试了两种方法来添加它，没有人工作。

1）我尝试在邮件的标题中使用<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8">。当我在Gmail中阅读电子邮件来源时，它是这样的：

<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
    <div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
    <div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
    <div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
    <div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
    <a href="https://mywebsite.com" style="text-decoration: none;"><div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div></a>
    </div>
</body>
</html>

看起来不错，但仍然无法正常工作。

2）我使用font-face和效果相同：

<html>
<head>
<style>@font-face{
       font-family: 'Titillium Web';
       src: url(https://mywebsite.com/font.ttf);}
</style><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
    <div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
    <div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
    <div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
    <div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
    <a href="https://mywebsite.com" style="text-decoration: none;"><div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div></a>
    </div>
</body>
</html>

Answer 1

显然这是可能的，但电子邮件客户端兼容性是模糊的。此外，这是一个很大的资源，可用于HTML简报（与网页相反，您可以控制渲染和加载）。

如果你真的想这样做，请看这里有关这个主题的一些好消息：

https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/

Google Web字体<link />不适用于电子邮件。

1 个答案: