是否可以将可下载的TTF字体配置为与系统字体具有相同的行为,即:
字体系列存储在几个文件中:
foo.ttf
foob.ttf
fooi.ttf
字体分配有通用的家族名称:
p{
font-family: Foo, serif;
}
浏览器会自动选择适当的变体:
p.warning{
font-weight: bold;
}
p.note{
font-style: italic;
}
我浏览的文档建议您需要将每个变体配置为完全不同的字体:
@font-face{
font-family: FooRegular;
src: url(foo.ttf);
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: FooBold;
src: url(foob.ttf);
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: FooItalic;
src: url(fooi.ttf);
font-weight: normal;
font-style: italic;
}
p{
font-family: FooRegular, serif;
}
p.warning{
font-family: FooBold, serif;
font-weight: bold;
}
p.note{
font-family: FooItalic, serif;
font-style: italic;
}
是这样吗,还是我只是在浏览已过时/不完整的文档?
许多教程忽略的事实是,您可以仅使用一个家族名称并将其分配给所有规则:
@font-face{
font-family: Foo; /* Just one name */
src: url(foo.ttf);
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: Foo; /* Just one name */
src: url(foob.ttf);
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: Foo; /* Just one name */
src: url(fooi.ttf);
font-weight: normal;
font-style: italic;
}
...因此,您需要的所有CSS是:
p{
font-family: Foo, serif;
/* ^^^ */
}
p.warning{
font-weight: bold;
}
p.note{
font-style: italic;
}
该信息的功劳归@duvigneau
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句