Font italic is not effective in backend mode

[ouronghuang]

main.js

import Konva from 'konva';
import 'konva/skia-backend';

const text = new Konva.Text({
  text: 'testf\ntestf',
  fontFamily: 'Microsoft Yahei',
  fontSize: 80,
  fontStyle: 'italic',
  padding: 20,
  lineHeight: 1.4,
  letterSpacing: 0,
  fill: '#000000',
});
console.log(text.toDataURL());

package.json

{
  "name": "font-script",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^22.17.1"
  },
  "dependencies": {
    "konva": "^10.0.12",
    "skia-canvas": "^3.0.8"
  }
}

[ouronghuang]

The following code can run normally with the comments

// node_modules/konva/lib/shapes/Text.js
_getContextFont() {
    return (this.fontStyle() +
        SPACE +
        // this.fontVariant() +
        // SPACE +
        (this.fontSize() + PX_SPACE) +
        normalizeFontFamily(this.fontFamily()));
}

[lavrton]

Looks like it is the bug in skia-canvas library. @ouronghuang can you report the bug there with pure 2d canvas demo?
Looks like skia-canvas doesn't render context.font = italic normal 80px Arial correctly.

[ouronghuang]

Demo:

import { Canvas } from 'skia-canvas';

const canvas = new Canvas();
const ctx = canvas.getContext('2d')

// not supported
ctx.font = 'italic normal 80px Arial'

// supported
ctx.font = 'italic 80px Arial'

ctx.fillStyle = '#900'
ctx.fillText('testf', 0, 90)

console.log(canvas.toDataURL('png'))

In the official document context#fontvariant:

The context’s .font property follows the CSS 2.1 standard and allows the selection of only a single font-variant type: normal vs small-caps. The full range of CSS 3 font-variant values can be used if assigned to the context’s .fontVariant property (presuming the currently selected font supports them). Note that setting .font will also update the current .fontVariant value, so be sure to set the variant after selecting a typeface.