CSS @字体-只加载2个字体-权重
CSS @字体-只加载2个字体-权重
提问于 2022-04-14 21:29:15
我试图使用下面的CSS，它添加了一个字体系列，有六个不同的字体权重。
@font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
@font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
@font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
@font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
@font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
@font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }
.myClass{
font-family: myFont, sans-serif;
font-weight: Medium;
}当我尝试使用myClass类时，它使用字体大小为400的myFont-Bold.ttf，而不是使用字体重为400的myFont-Medium.ttf。在开发工具中，我可以看到它只加载了我字体的两个字体:粗体和黑色。当我删除黑色字体重量的行时，它会加载到普通和粗体中。为什么它只加载了两个字体，而不是所有的字体？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-02 15:06:46
您正在使用无效的font-weight关键字。(请参阅MDN：字体重量)
样式名称如"light“或"medium”通常用于桌面环境(例如使用图形应用程序)--这些样式名称实际上存储在字体文件中(至少以truetype/ttf等格式存储)。
但是，浏览器不能使用这些内部存储的样式名称，需要显式的样式/权重映射，如下所示：
@font-face {
font-family: myFont;
font-weight: 100;
font-style: normal;
src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
@font-face {
font-family: myFont;
font-weight: 300;
font-style: normal;
src: url("../fonts/myFont-Light.ttf") format('truetype');
}
@font-face {
font-family: myFont;
font-weight: 500;
font-style: normal;
src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
@font-face {
font-family: myFont;
font-weight: 400;
font-style: normal;
src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
@font-face {
font-family: myFont;
font-weight: 700;
font-style: normal;
src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
@font-face {
font-family: myFont;
font-weight: 900;
font-style: normal;
src: url("../fonts/myFont-Black.ttf") format('truetype');
}
body {
font-family: myFont, sans-serif;
}
.thin {
font-weight: 100;
}
.medium {
font-weight: 500;
}
.black {
font-weight: 900;
}我强烈建议使用数字字体权重值，以获得更好的兼容性，并指定格式(如format('truetype') )。
您还应该包括一个font-style来映射正常和斜体样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71877821
复制相关文章
相似问题
腾讯云开发者
