Question

在为不同的网站搜索许多样式表之后，我一直注意到使用的字体或字体系列值似乎没有使用正确的字体系列名称。我想知道我是不是完全理解如何引用CSS使用的字体系列名称。

例如，在this stylesheet上，作者多次使用以下内容：

font-family:"minion-pro";

但是，据谷歌告诉我，实际上并没有这样的字体系列。例如，如果您使用Google进行以下操作：

font minion-pro

前几首歌都没有显示任何内容＆＃34; minion-pro＆＃34;，而是所有的点击都是针对＆＃34; Minion＆＃34;或者＆＃34; Minion Pro＆＃34 ;;第五次点击是this link，据我了解CSS，要求用户将此字体引用为

font-family: "Minion Pro";

我也在一些样式表中看到了这个字体＆＃34; Myriad Pro＆＃34;当你使用Google font myriad-pro时，只会返回字体＆＃34; Myriad＆＃34;和＃34; Myriad Pro＆＃34;。也就是说，在CSS样式表中，我已经看到了这个

font-family: "Myriad-Pro";

但对我来说，这是不正确的，应该是

font-family: "Myriad Pro";

所以我的简单问题是：是包含空格的字体，如果用连字符替换空格，可以正确呈现空间吗？

我相信这个问题的答案是＆＃34; no＆＃34;基于文档 - 我不能轻易测试这个，因为我没有轻松访问这些字体，我现在正在工作。（当我尝试使用＆＃34; Myriad Pro＆＃34;或者＃34; Minion Pro＆＃34;没有任何反应时使用Codepenning - 字体无法识别）

Answer 1

在创建@font-face字体定义以提供字体时，这取决于您为font-family命名的内容。

像这样：

@font-face {
    font-family: 'montserratregular';
    src: url('/content/fonts/Montserrat/montserrat-regular.eot');
    src: url('/content/fonts/Montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
         url('/content/fonts/Montserrat/montserrat-regular.woff2') format('woff2'),
         url('/content/fonts/Montserrat/montserrat-regular.woff') format('woff'),
         url('/content/fonts/Montserrat/montserrat-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

在这种情况下，我会在我的CSS中引用font-family: 'montserratregular';。但是，如果我在@font-face声明中定义了font-family: 'montserrat-regular';或font-family: 'montserrat regular';，那么我会在我的CSS中使用它。

在你链接的样式表中，作者可能在一个单独的css文件中有他的@font-face声明，他将Minion Pro定义为＆＃34; minion-pro＆＃34;，这很常见。

您未向客户端提供的其他字体系统字体应由其系统字体名称引用。您可以使用CSS Font Stack之类的网站查看这些名称是什么以及它们在Windows或Mac上是系统字体的可能性（以％为单位）。它还为字体提供了常见的后备（即你可以这样做：font-family: 'Myriad Pro', 'Myriad-Pro', 'MyriadPro', Arial;）。

默认情况下，像Myriad Pro或Minion Pro这样的字体通常不会作为已安装的系统字体出货，因此我们使用@font-face方法将字体提供给客户端。我的用户可以在他们的机器上安装Myraid Pro然后它将是一个系统字体，但你必须知道确切的名称，你不能保证用户有一个独特的字体或要求用户手动访问你的网站安装它。

字体系列名称是否包含与带有空格而不是连字符的相同字体名称相同的连字符？

1 个答案: