Question

我正在尝试在简报/ html电子邮件中使用自定义字体。我在Safari，firefox和chrome中使用了@ font-face导入，但是当我尝试在电子邮件客户端中使用它（使用apple mail，thunderbird和gmail测试）时，不会显示自定义字体。我在SO上阅读了几篇关于此的帖子，但建议的解决方案始终是检查邮件客户端是否受支持（它是什么）并使用不同的格式（我这样做）。它也不适用于谷歌字体。那么有什么其他建议可能是错的吗？

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="x-apple-disable-message-reformatting">

    <!--[if !mso]><!-->
    <style type="text/css">
    @font-face {
          font-family: 'myfont';
          src: url('https://example.com/various/myfont-Regular.eot');
          src: url('https://example.com/various/myfont-Regular.woff2') format('woff2'),
               url('https://example.com/various/myfont-Regular.woff') format('woff'),
               url('https://example.com/various/myfont-Regular.ttf') format('truetype'),
               url('https://example.com/various/myfont-Regular.svg#FreelandforDouglas-Regular') format('svg'),
               url('https://example.com/various/myfont-Regular.eot?#iefix') format('embedded-opentype');
          font-weight: normal;
          font-style: normal;
        }
    </style>
    <!--<![endif]-->
</head>

Answer 1

如你所说，@font-face is not supported in some email clients。根据您正在设计的字体，您可以使用自定义字体指定字体堆栈，然后再使用类似的系统字体。

我用于网络字体的代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
    <style>
        * {
            font-family: sans-serif !important;
        }
    </style>
    <![endif]-->

    <!--[if !mso]><!-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
    <!--<![endif]-->

有a few ways to reference web fonts in email，我更喜欢使用<link>方法。

或者，您可以通过Font Squirrel's Font Generator运行字体并使用@import方法：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
    <style>
        * {
            font-family: sans-serif !important;
        }
    </style>
    <![endif]-->

    <!--[if !mso]><!-->
    <style>
        @font-face {
            font-family: 'MyWebFont';
            src: url('http://www.website.com/webfont.eot');
            src: url('http://www.website.com/webfont.eot?#iefix') format('embedded-opentype'),
               url('http://www.website.com/webfont.woff2') format('woff2'),
               url('http://www.website.com/webfont.woff') format('woff'),
               url('http://www.website.com/webfont.ttf')  format('truetype'),
               url('http://www.website.com/webfont.svg#svgFontName') format('svg');
        }
    </style>
    <!--<![endif]-->

您可能不需要所有这些字体格式（例如，您可能不需要SVG格式），我建议您进行测试。

@ font-face无法在html电子邮件中使用

1 个答案: