Question

我需要使用Avenir字体发送HTML格式的电子邮件（如果它存在于操作系统中）。这个字体的两个重量是重和黑（后者是最重的重量）。我希望邮件客户端使用Avenir Heavy来加粗文本，但他们使用的是Avenir Black。

在我的HTML中，我有<style type="text/css">标记：

body {
    font-family: Avenir, Helvetica, Arial, sans-serif;
}
.font_h1 {
    font-weight: bold;
}

当我在桌面浏览器（Firefox，Chrome或Safari）中打开我的HTML文件时，它使用Avenir Heavy作为粗体字体。但是当我通过电子邮件发送它并在Mac Outlook 2016或iOS 10的Mail客户端中查看时，那些显示粗体字体的Avenir Black，这是一个更重的字体。如果我将font-weight指定为bolder，则会发生同样的事情。

奇怪的是，如果我说：

body {
    font-family: Avenir Heavy;
}

然后该页面仍由具有Avenir Medium的桌面浏览器呈现，Avenir Heavy用于加粗。

我不认为@font-face是我的答案，因为我没有从网址加载字体。

如何告诉浏览器或邮件客户端专门使用Avenir Heavy作为粗体？

Answer 1

我认为您需要明确打开字体（使用字体处理应用程序，例如fontforge）并检查它属于哪个系列。然后使用该姓氏，您将安全回家。此外，如果您想要准确衡量您的权重，请使用编号值，例如

400表示正常
700表示粗体
900 for black
等

Answer 2

我这样宣布Avenir：

@font-face {
  font-family: 'Avenir';
  font-weight: 300;
  font-style: normal;
  src: local('Avenir Book'), local('Avenir-300'),
    url('../../assets/fonts/Avenir-Book/Avenir-Book.eot') format('embedded-opentype'),
    url('../../assets/fonts/Avenir-Book/Avenir-Book.woff') format('woff'),
    url('../../assets/fonts/Avenir-Book/Avenir-Book.ttf') format('truetype');
}

@font-face {
  font-family: 'Avenir';
  font-weight: 500;
  font-style: normal;
  src: local('Avenir Medium'), local('Avenir-500'),
    url('../../assets/fonts/Avenir-Medium/Avenir-Medium.eot') format('embedded-opentype'),
    url('../../assets/fonts/Avenir-Medium/Avenir-Medium.woff') format('woff'),
    url('../../assets/fonts/Avenir-Medium/Avenir-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Avenir';
  font-weight: 700;
  font-style: normal;
  src: local('Avenir Heavy'), local('Avenir-700'),
    url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.eot') format('embedded-opentype'),
    url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.woff') format('woff'),
    url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.ttf') format('truetype');
}

@font-face {
  font-family: 'Avenir';
  font-weight: 900;
  font-style: normal;
  src: local('Avenir Black'), local('Avenir-900'),
    url('../../assets/fonts/Avenir-Black/Avenir-Black.eot') format('embedded-opentype'),
    url('../../assets/fonts/Avenir-Black/Avenir-Black.woff') format('woff'),
    url('../../assets/fonts/Avenir-Black/Avenir-Black.ttf') format('truetype');
}

然后在CSS中：

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

h1 {
  font-weight: 900; // black
}

h2 {
  font-weight: 700; // heavy
}

h3 {
  font-weight: 500; // medium
}

...

我如何指定“大胆”应该是“Avenir Heavy”而不是“Avenir Black”？

2 个答案: