使用正确的本地字体名称

问题描述 投票:0回答:2

作为一种小的优化技术,我想通过CSS在本地提供'Avenir Next-Regular'字体(因此,如果用户在本地使用此字体,它将使用它而不是下载woff2 / woff / etc。

例如,该字体自版本6起就已在IOS中使用,因此是一个快速的胜利。

但是我不确定如何在CSS堆栈中指定本地字体名称?我需要常规吗?有没有一个可以帮助您的程序?

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

我是否需要指定字体粗细才能获得“常规”版本?然后在devtools中有一种方法可以查看它是否有效?我想没有看到对外部字体文件的调用意味着成功?

css fonts font-face
2个回答
1
投票

您应该使用字体文件中定义的正确字体名称。如果您使用的是Windows,则可以安装Microsoft的Font properties extension。安装后,只需右键单击字体文件,然后选择Properties。在这里,您会找到带有字体信息的其他标签。其中之一将显示字体名称。

我想这会是这样:

@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
投票

[当您不想让用户下载字体并让其使用'Avenir Next-Regular'字体时,应在字体说明中将该字体放在第一行。查找自己的字体以获取确切名称并进行设置(仅):

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

但是请检查'Avenir Next-Regular'是否在本地广泛使用(不太可能,因为它是一种昂贵的字体)。

© www.soinside.com 2019 - 2024. All rights reserved.