我有很多字体,
- OpenSans-bold.ttf
- OpenSans-boldItalic.ttf
- OpenSans-extrabold.ttf
- OpenSans-italic.ttf
- OpenSans-light.ttf
我将如何继续只创建一个文件,而不是这么多不同的文件? 也许像我通常那样在 CSS 上使用它们,或者像您在 photoshop 上那样使用它们?
例如
small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}
如有任何帮助,我们将不胜感激。
最佳答案
如果你想使用不同的字体(常规、斜体、粗体等),你需要不同的字体文件,因为每种字体都是作为一个单独的字体文件实现的(实际上,你甚至需要不同的字体格式,以涵盖不同的浏览器)。
但是您可以将它们用作单个字体系列,就像您使用 Arial 并对其应用斜体和粗体一样,直接或间接使用 CSS(通过 HTML,例如 h2
元素默认为粗体)。为此,您需要声明一个字体系列。
例如,FontSquirrel 生成的 CSS 代码将每种字体定义为一个字体系列。这是可能的,但不合逻辑且不方便。例如,它生成
@font-face {
font-family: 'open_sansbold';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'),
url('opensans-bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
为了使事情更合乎逻辑,更改font-weight
值,并将font-family
名称更改为您在不同@font- 中使用的名称face
规则(针对家族的不同字体)。例如,
@font-face {
font-family: 'Open Sans';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'),
url('opensans-bold-webfont.svg#open_sansbold') format('svg');
font-weight: bold;
font-style: normal;
}
关于css - 如何合并字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14603600/