Css 字体系列成本与字体重量

我继承了一个代码项目，其中字体的设置不是最合理的。该网站使用了Proxima Nova字体的一些权重

不再将这些字体文件绑定到同一字体系列（即

字体系列：“Proxima Nova”

），而是为Proxima Nova字体的每个重量创建一个新的

字体系列

实际上，这意味着要更改字体的重量，您需要编写
字体系列：“Proxima Nova Bold”
，而不是
字体重量：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;
}

另一个例子：
它通常是实际字体文件编码的结果，与任何用法无关。一些字体供应商不会将他们的字体打包成一个漂亮、简单的系列。但是铸造厂自己将每一个重量分割成一个新的文件。（我不喜欢这样，但其实并不少见。）

我相信Proxima Nova就是这样一种字体——每个权重是一个单独的文件，而不是一个“家族”文件的一部分
 它通常是实际字体文件编码的结果，与任何用法无关。一些字体供应商不会将他们的字体打包成一个漂亮、简单的系列。但是铸造厂自己将每一个重量分割成一个新的文件。（我不喜欢这样，但其实并不少见。）

我相信Proxima Nova就是这样一种字体——每个权重是一个单独的文件，而不是一个“家族”文件的一部分
 简短回答：不

您在
@font-face
规则中指定的属性用于将“font-…

值元组”解析为“网络上由

src

指示的实际字体资源”，因此您是否将字体声明为：

@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");
}

@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: 1 */
  font-family: SillyBoldItalicSmallcaps;
}

.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-face {
  /* identifying font-... values: 1 */
  font-family: SillyBoldItalicSmallcaps;

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

@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: 1 */
  font-family: SillyBoldItalicSmallcaps;
}

.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

字体：在这两种情况下，核心机制是相同的，即我们“将

font-…

值元组解析为与该值元组匹配的已声明资源”。需要注意的重要一点是，在这两种情况下，元组都是唯一的。在第一种情况下，因为

font-family

是唯一标识字符串，在第二种情况下，因为

font-family

可能不再是唯一标识字符串，所以附加属性值会生成一个唯一的组合，可以解析为单个字体资源

唯一真正的区别是，后者使开发和维护变得更加容易（就消费客户而言，最终结果是相同的）。轻松直接转化为提高效率、更好的代码、更低的成本，以及一系列的事情，所有这些都转化为“我们应该这样做”。

简短回答：不

您在

@font-face

规则中指定的属性用于将“font-…值元组”解析为“网络上由

src

指示的实际字体资源”，因此您是否将字体声明为：

@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");
}

@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: 1 */
  font-family: SillyBoldItalicSmallcaps;
}

.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-face {
  /* identifying font-... values: 1 */
  font-family: SillyBoldItalicSmallcaps;

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

@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: 1 */
  font-family: SillyBoldItalicSmallcaps;
}

.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

字体：在这两种情况下，核心机制是相同的，即我们“将

font-…

值元组解析为与该值元组匹配的已声明资源”。需要注意的重要一点是，在这两种情况下，元组都是唯一的。在第一种情况下，因为

font-family

是唯一标识字符串，在第二种情况下，因为

font-family

可能不再是唯一标识字符串，所以附加属性值会生成一个唯一的组合，可以解析为单个字体资源

---

唯一真正的区别是，后者使开发和维护变得更加容易（就消费客户而言，最终结果是相同的）。轻松直接转化为提高效率、更好的代码、更低的成本，以及一系列的事情，所有这些都转化为“我们应该这样做”。

对。但是您仍然可以将这些文件绑定到相同的

字体系列

值。但就编码问题而言，你指的是文件格式还是别的什么？文件格式。。。如果每个权重是一个单独的.otf文件。。那么将它们绑定到同一个CSS声明通常就不需要担心了。工作流的一种偏好。。。在需要时声明重量或在需要时命名族。也。。许多人只是从谷歌字体复制/粘贴代码，不会费心修改。谷歌会分割权重。我添加了一个我喜欢的方法的例子。我在想与

font-family

相比，

font-weight

可能会产生一些渲染开销。类似于

top

和

left

在t