嵌入字体看起来与预期不同
当嵌入字体用于标签时,它看起来是正确的,但是当相同的字体用于组合框时,所选项目的字体看起来与下拉列表和标签字体不同。
@font-face
{
src:url("/assets/fonts/Helvetica.TTF");
fontFamily: "Helvetica Neue Bold Condensed";
fontStyle: normal;
fontWeight: normal;
}
.comboBox
{
fontFamily: "Helvetica Neue Bold Condensed";
fontSize: 11;
color: #666666;
}
.label
{
fontFamily: "Helvetica Neue Bold Condensed";
fontSize: 12;
color: #CCCCCC;
}
为什么它们看起来会有所不同(除了尺寸和颜色之外)?
When an embedded font is used for a label it looks correct, but when the same font is used for a combobox, the selected item font looks different from the dropdown and label font.
@font-face
{
src:url("/assets/fonts/Helvetica.TTF");
fontFamily: "Helvetica Neue Bold Condensed";
fontStyle: normal;
fontWeight: normal;
}
.comboBox
{
fontFamily: "Helvetica Neue Bold Condensed";
fontSize: 11;
color: #666666;
}
.label
{
fontFamily: "Helvetica Neue Bold Condensed";
fontSize: 12;
color: #CCCCCC;
}
Why would these look different (besides the size and color)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您正在嵌入一种字体并指定在 fontWeight 正常时应使用该字体。这就是
fontWeight: normal
样式的含义。但是,组合框中的标签默认为粗体(这是由 Flex 框架完成的),因此它们不会使用嵌入字体。
解决方法:创建
@font-face
声明的另一个副本,并将其设置为fontWeight: 粗体
,或者在您的.comboBox
规则。You are embedding a font and specifying that it should be used whenever the fontWeight is normal. This is what the
fontWeight: normal
style means.However, the labels in combo boxes are bold by default (this is done by the Flex framework), so they will not use the embedded font.
To fix: Either create another copy of your
@font-face
declaration and make that onefontWeight: bold
, or specifyfontWeight: normal
on your.comboBox
rule.您需要创建一个“完整”字体系列。为此,请为家庭中的每个预期字体创建一个“@font-face”:正常、粗体、斜体和粗体斜体。确保每个“@font-face”定义在其“fontFamily”属性中使用相同的名称。文档对此很清楚,但很冗长。
Petrowski 先生是正确的,Flex 框架将根据上下文选择使用哪一种字体,但这里需要指出的是,ttf/otf 文件通常只包含一种字体。因此,您可能需要在“src”属性中引用不同的 ttf/otf。
You need to create a "full" font family. To do this, create one "@font-face" for each of the expected faces of the family: normal, bold, italic and bold-italic. Make sure each "@font-face" definition uses the same name in its "fontFamily" attribute. The docs are clear on this, but verbose.
Mr. Petrowski is correct that the Flex framework will choose which face it uses depending on context, but the thing that needs to be called out here is that it's common that a ttf/otf file only includes one font face. So you will likely need different ttf/otf referenced in your 'src' attribute.