本文共 4923 字，大约阅读时间需要 16 分钟。

我正在寻找 CSS规则的 ，但我一无所获。 我分别使用粗体 ， 斜体和粗体+斜体文件 。 如何将所有三个文件嵌入一个@font-face规则中？ 例如，如果我有：

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

浏览器将不知道用于粗体显示的字体（因为该文件是DejaVuSansBold.ttf），因此它将默认为我可能不想要的字体。 我如何才能告诉浏览器某种字体的所有不同变体？

#1楼

如果您使用的是Google字体，建议您采取以下措施。

如果要从本地主机或服务器运行字体，则需要下载文件。

与其在下载链接中下载ttf软件包，不如使用它们提供的实时链接，例如：

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

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

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

将更新的字体声明与相对路径粘贴到CSS中的woff文件，即可完成。

#2楼

解决方案似乎是添加多个@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;}

顺便说一句，似乎Google Chrome浏览器不知道format("ttf")参数，因此您可能要跳过这一点。

（此答案对于规范是正确的仅允许一种字体样式，而不是逗号分隔的列表。）

#3楼

从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;}

在大多数情况下，斜体可能就足够了，如果您谨慎定义要使用并坚持使用的斜体，则不需要斜线规则。

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

#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;}

#6楼

如今，2017-12-17。 我没有在找到有关Font-property-order的必要性的任何描述。 而且无论测试顺序如何，我都可以使用chrome测试。

@font-face {  font-family: 'Font Awesome 5 Free';  font-weight: 900;  src: url('#{$fa-font-path}/fa-solid-900.eot');  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');}@font-face {  font-family: 'Font Awesome 5 Free';  font-weight: 400;  src: url('#{$fa-font-path}/fa-regular-400.eot');  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');}

#7楼

不要忘记，对于粗体变体，它是font-weight ； 对于斜体变体，它是font-style

转载地址：http://yzcnb.baihongyu.com/