QML 的 font 与 Canvas 的中 font

QML 的 font 与 Canvas 的中 font

QML 中的 Canvas 的 font 类型和 HTML CSS font 的类型一样，但是和 QML 本身的 font 不一样，所以需要做一个转换函数。

QML 中的 font 有如下属性：

string

font.family

bool

font.bold

bool

font.italic

bool

font.underline

real

font.pointSize

int

font.pixelSize

enumeration

font.weight

bool

font.overline

bool

font.strikeout

enumeration

font.capitalization

real

font.letterSpacing

real

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;
}
}

CSS font 属性