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

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

@font-face {font-family: "DejaVu Sans";src: url("./fonts/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")参数，因此您可能要跳过这一点。

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

#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。我没有在spec中找到有关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

如何为同一字体添加多个字体文件？相关推荐

html怎么引入多个字体文件,css – 如何为同一个字体添加多个字体文件？
解决方案似乎是添加多个@ font-face规则,例如: @font-face { font-family: "DejaVu Sans"; src: url("fonts ...
html如何给文字添加阴影效果,css中怎么给字体添加阴影效果
css中可以使用text-shadow属性给字体添加阴影效果,text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式. text-shadow属性的语法 ...
css3 text-shadow 为网页字体添加阴影
css3 text-shadow 为网页字体添加阴影 text-shadow:为网页字体添加阴影, 可以通过对text-shadow属性设置相关的属性值,可以实现一些漂亮的字体阴影效果. 属性与值的说 ...
iOS - 手动添加新的字体
前言最近在一个日记软件,发现系统的默认字体过于丑陋,于是有了更改应用字体的想法.完成操作的过程中踩了一些小坑,写下此文记录一下,希望能对后人有所帮助. 字体添加 1.引入字体文件直接将下载好的字体 ...
delphi7 中文注释字体_使用nerd-font/font-patcher为字体添加字体图标
Nerd-fonts常用来在终端下显示各种图标,这个项目的github repo下提供了许多Nerd Font字体,图标使用效果如图. 由于目前Windows Terminal还不支持设置第二字体,要 ...
iOS-使用添加的花样字体
代码地址如下: http://www.demodashi.com/demo/11501.html 项目需求中, 有时候有些金额利率等这些不用系统默认字体展现, 而需要着重突出展示! 一.项目截图及效果 ...
itext7学习笔记杂谈系列2——在itext7中添加中文(其他字体)和字体相关事
作者:CuteXiaoKe 微信公众号:CuteXiaoKe 在本章,我们会讨论如何在itext7中显示中文,或者其他CJK(Chinese/Japan/Koera)等非ASCII码字符遇到的问题,解 ...
TouchGFX 中文字体添加(直入正题）
TouchGFX 中文字体添加 (自己搞这个字体库也是搞了挺久的) 直接进入正题如下截图,打开字体的配置页,第③步所显示的这两种字体就是支持中文显示的字体.截图图中蓝色框中所添加的东西是用于显示特殊 ...
linux添加windows字体文件夹里,如何把Windows下的字体添加到Linux中
如何把Windows下的字体添加到Linux中 Linux(Fedora/Ubuntu/CentOS)的字体实在不尽如人意,而且在网页及文档显示时很多字无法显示出来,特别多的空白和乱码,其实,我们可以 ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

#7楼

如何为同一字体添加多个字体文件？相关推荐

最新文章

热门文章