QML 的 font 与 Canvas 的中 font
QML 中的 Canvas 的 font 类型和 HTML CSS font 的类型一样,但是和 QML 本身的 font 不一样,所以需要做一个转换函数。
QML 中的 font 有如下属性:
string
font.familybool
font.boldbool
font.italicbool
font.underlinereal
font.pointSizeint
font.pixelSizeenumeration
font.weightbool
font.overlinebool
font.strikeoutenumeration
font.capitalizationreal
font.letterSpacingreal
font.wordSpacing
CSS font
font 简写属性在一个声明中设置所有字体属性。
注释:此属性也有第六个值:”line-height”,可设置行间距。
可以按顺序设置如下属性:
font-style
font-variant
font-weight
font-size/line-height
font-family
p.ex1
{
font:italic arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}
QML font 到 CSS font 的转换
font-style(规定字体样式)
normal, italic(斜体), oblique(斜体),与 QML 的
font.italic
对应。font-variant(规定字体异体)
normal, small-caps ,与 QML 无对应关系,直接使用
normal
font-weight(规定字体粗细)
normal(400), bold(700), bolder(更粗), lighter(更细), 100~900,与 QML 的
font.bold
以及font.weight
QML 上的 字体宽度与 CSS 对应不太一致。font-size
与 QML 的 font.pixelSize 直接对应。
line-height
与 FontMetrics::height 对应。但是 QML 中 Canvas 的 font 不支持此属性。
font-family
与 QML font.family 对应。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
具体代码:
从 QML 到 CSS font 的转换:
FontMetrics {
id: fontMetrics
function getFontToContext2D() {
var cssFontString = "";
if(fontMetrics.font.italic) {
cssFontString += "italic ";
} else {
cssFontString += "normal ";
}
if(fontMetrics.font.bold) {
cssFontString += "bold ";
} else {
cssFontString += "normal ";
}
cssFontString += (fontMetrics.font.pixelSize+"px ");
// cssFontString += ("/"+fontMetrics.height+"px ");
cssFontString += fontMetrics.font.family;
return cssFontString;
}
}