Question

我继承了一个代码项目，其中的字体没有以最合理的方式设置。该网站使用了一些Proxima Nova字体的重量。

不是将这些字体文件绑定到同一个字体系列（即font-family: "Proxima Nova"），而是为Proxima Nova字体的每个权重创建一个新的font-family。

实际上，这意味着为了更改字体粗细，您需要编写font-family: "Proxima Nova Bold"而不是font-weight: 700。

我很想知道这是否会产生明显的易读性问题。答案越技术越好。

编辑：

以下是一个示例，说明我的首选方法是什么，以防我的工作方式出现问题：

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: normal;
   font-style: italic;
}

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: 700;
   font-style: normal;
}

另一个例子：@font-face: Only using one font-family with different font-weights?

Answer 1

简答：不。

您在@font-face规则中指定的属性用于解析＆＃34; font-...值元组＆＃34; to＆＃34;由src＆＃34;表示的网络上的实际字体资源，因此您是否将字体声明为：

@font-face {
  /* identifying font-... values: 1 */
  font-family: SillyBoldItalicSmallcaps;

  /* font resource to use when values match: */
  src: url(./font-bold-italic-SC.woff) format("WOFF");
}

然后用一些文档CSS解决它：

.rulename {
  /* values to use to find a specific font resource: 1 */
  font-family: SillyBoldItalicSmallcaps;
}

（元组{font-family}与声明的元组匹配）或者您是否将字体声明为：

@font-face {
  /* identifying font-... values: 4 */
  font-family: MyFont;
  font-weight: bold;
  font-style: italic;
  font-variant: smallcaps;

  /* font resource to use when values match: */
  src: url(./font-bold-italic-SC.woff) format("WOFF");
}

然后用一些文档CSS解决它：

.rulename {
  /* values to use to find a specific font resource: 4 */
  font-family: MyFont;
  font-weight: bold;
  font-style: italic;
  font-variant: smallcaps;
}

（元组{font-family,font-weight,font-style,font-variant}与声明的元组匹配）CSS引擎根据您提供的font-...值，实际资源找到没有区别。两者最终都找到用于样式化文本的./font-bold-italic-sc.WOFF字体：核心机制在两种情况下都是相同的，因为我们将＃{1}}值元组解析为与该值匹配的声明资源元组＆＃34 ;.需要注意的重要一点是，在这两种情况下，元组都是唯一的。在第一种情况下，因为font-...是唯一标识字符串，在第二种情况下，因为虽然font-family可能不再唯一标识，但附加属性值会产生唯一的组合，可以解析为单个字体资源。

唯一真正的差异是后者在开发和维护方面使生活变得相当容易（就消费客户而言，最终结果是相同的）。并且易于直接转换为提高效率，更好的代码，更低的成本，以及所有转化为＆＃34;我们应该这样做的大量事情＆＃34;。

Answer 2

经常是实际字体文件编码的结果，与任何用法无关。某些字体供应商不将其字体打包成一个漂亮，简单的系列。但相反，代工厂本身会将每个重量分成一个新文件。（我不喜欢这个，但它并不常见。）

我相信Proxima Nova就是这样一种字体 - 每个重量都是一个单独的文件，而不是一个＆＃34;家庭＆＃34;文件。

font-family与font-weight的成本

2 个答案: