logo标签列表

使用正确的本地字体名称

cssfontsfont-face
3
作为一种小型优化技术，我希望通过CSS本地提供“Avenir Next-Regular”字体（因此，如果用户在本地拥有此字体，则将使用它而不是下载woff2 / woff等）。
例如，这种字体从IOS版本6开始就已经存在，所以这是一个快速的解决方案。
然而，我不确定如何在CSS堆栈中指定本地字体名称？我需要单词“Regular”吗？是否有可以帮助的程序？
@font-face {
  font-family: 'Avenir';
  src: local("Avenir Next Regular"), /* THIS? */
       local("Avenir-Next-Regular"), /* THIS? */
       local("Avenir-Next"),         /* SOMETHING ELSE? */
       url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
       url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
       url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}

我需要指定字体的粗细才能获得“regular”版本吗？然后在开发工具中有没有办法查看它是否有效？我猜没有看到调用外部字体文件的情况意味着成功吗？

3个回答
1

您应该使用字体文件中定义的正确字体名称。如果您使用的是Windows操作系统，可以安装Microsoft的Font properties extension扩展程序。安装后，只需右键单击字体文件并选择属性即可。在那里，您将找到显示字体名称的额外选项卡之一。

我想它会像这样：

@font-face {
    font-family: 'Avenir Next - Regular';
    src: local('Avenir Next'),
         url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
         url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
         url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}
1
字体系列反映了字体的基本名称，而变体是子级（字体面）并由重量（例如Regular、Bold）和样式（正常和斜体）定义。 在定义自定义@font-face时，请确保定义一个常见的字体系列，以便正确应用字体重量和字体样式，并且字体面在同一字体系列内相应切换。
对于各种字体面本身，没有官方命名约定，但大多数字体都遵循这个模式： [字体名称] [重量？] [斜体？]
常见重量的名称通常为Thin、ExtraLight、Light、Regular、Medium、SemiBold、Bold、ExtraBold和Black。然而，一些字体可能会在额外的变体中引入一个额外的空格或者将Semi替换为Demi。更多关于可能的名称的信息可以在这里找到。
小常见例外：对于默认的400字重字体，名称通常为字体名称 Regular，而斜体变体中则省略了字重：字体名称 Italic。

下面是虚构字体系列Cool Font可能的字体名称表：

字重 风格 可能的名称
100 常规体 Cool Font Thin
200 常规体 Cool Font ExtraLight
300 常规体 Cool Font Light
400 常规体 Cool Font Regular
500 常规体 Cool Font Medium
600 常规体 Cool Font SemiBold
700 常规体 Cool Font Bold
800 常规体 Cool Font ExtraBold
900 常规体 Cool Font Black
100 斜体 Cool Font Thin Italic
200 斜体 Cool Font ExtraLight Italic
300 斜体 Cool Font Light Italic
400 斜体 Cool Font Italic
500 斜体 Cool Font Medium Italic
600 斜体 Cool Font SemiBold Italic
700 斜体 Cool Font Bold Italic
800 斜体 Cool Font ExtraBold Italic
900 斜体 Cool Font Black Italic
请记住，您的字体系列可能与此表格不同，因此最好检查字体本身。
示例： 假设整个 Cool Font 系列都包含符合上述命名约定的 (斜体) 常规和粗体字体，正确的定义可能是：
@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Regular'),
       url('Cool_Font_Regular.woff2') format('woff2'),
       url('Cool_Font_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Bold'),
       url('Cool_Font_Bold.woff2') format('woff2'),
       url('Cool_Font_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Italic'),
       url('Cool_Font_Italic.woff2') format('woff2'),
       url('Cool_Font_Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Bold Italic'),
       url('Cool_Font_Bold_Italic.woff2') format('woff2'),
       url('Cool_Font_Bold_Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

如果您不知道字体的正确变体名称，您可以定义多个本地变体而不会有任何副作用：
@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font SemiBold'),
       local('Cool Font Semi Bold'),
       local('Cool Font DemiBold'),
       local('Cool Font Demi Bold'),
       url('Cool_Font_SemiBold.woff2') format('woff2'),
       url('Cool_Font_SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
-2

当您不想让用户下载字体并使用“Avenir Next - Regular”字体时，应将此字体放在字体声明的第一行。查看您自己的字体以获取确切的名称和设置（仅限）：

font-family: "Avenir Next - Regular", Arial, Helvetica, "sans-serif";

但是请检查一下是否广泛地本地可用'Avenir Next - Regular'字体（不太可能，因为它是一种昂贵的字体）。

Avenir Next自iOS6以来已成为系统字体，并且最近的OSX版本也是如此。 - Adi
iOS在2015年是所有使用的操作系统中的三分之一。 - E.C.Pabon
如果您不希望用户加载"Avenir Next - Regular"字体，而是在用户没有本地字体时指向替代字体，请使用此答案中的代码。 - E.C.Pabon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接