如何为同一字体添加多个字体文件？

我正在查看@ font-face CSS规则的MDC页面 ，但我没有得到一件事。 我有单独的文件大胆 ， 斜体和大胆+斜体 。 我怎样才能在一个@ font-face规则中embedded所有三个文件？ 例如，如果我有：

@font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } 

浏览器将不知道用什么字体为粗体（因为该文件是DejaVuSansBold.ttf），所以它将默认为我可能不想要的东西。 我怎样才能告诉浏览器我有一个特定的字体的所有不同的变种？

Answer 1

解决scheme似乎是添加多个@font-face规则，例如：

 @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.ttf"); } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: italic, oblique; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: italic, oblique; } 

顺便说一下，谷歌浏览器似乎并不知道format("ttf")参数，所以你可能想跳过这一点。

（这个答案对CSS 2规范是正确的， CSS3只允许一种字体而不是逗号分隔的列表。

Answer 2

截至CSS3，规范已经改变，只允许一个font-style 。 逗号分隔的列表（每个CSS2）将被视为normal并覆盖任何较早的（默认）条目。 这将使以这种方式定义的字体永久显示为斜体。

 @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.ttf"); } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: italic; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: italic; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: oblique; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: oblique; } 

在大多数情况下，斜体可能是足够的，如果你小心地定义你将要使用和遵守它的地方，斜线规则就不是必须的了。

Answer 3

如果您使用Google字体，我会build议如下。

如果你想从你的本地主机或服务器上运行字体，你需要下载这些文件。

而不是下载链接中的ttf软件包，请使用它们提供的实时链接，例如：

 http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic 

将url粘贴到浏览器中，您将得到类似于第一个答案的字体声明。

打开提供的URL，下载并重命名文件。

粘贴更新的字体的声明与相对path到您的CSS中的woff文件，你就完成了。

Answer 4

要使字体变化正常工作，我必须在CSS中颠倒@ font-face的顺序。

 @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-BoldOblique.ttf"); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-Oblique.ttf"); font-style: italic, oblique; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono.ttf"); } 

Answer 5

 /* # +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # dejavu sans # +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /*default version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */ src: local('DejaVu Sans'), local('DejaVu-Sans'), /* Duplicated name with hyphen */ url('dejavu/DejaVuSans.ttf') format('truetype'); } /*bold version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-Bold.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-Bold.ttf') format('truetype'); font-weight: bold; } /*italic version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-Oblique.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-Oblique.ttf') format('truetype'); font-style: italic; } /*bold italic version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-BoldOblique.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-BoldOblique.ttf') format('truetype'); font-weight: bold; font-style: italic; }