search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.32k stars 1.68k forks source link

CSS Font shorthand gets populated incorrectly #224

Closed MDSLKTR closed 10 months ago

MDSLKTR commented 6 years ago

Declaration: @font-face { font-family: 'PorscheNextWLa'; src: url('../fonts/PorscheNextWLa-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }

Also there is 'font-size: 100%' property on the body which might be incorrectly merged with the rem font-size of the heading. Nonetheless if i remove it the problem persists, so it might be something else. Chrome discards the whole rule if you supply two values for font size.

Result: bildschirmfoto 2018-06-06 um 14 08 47

If I remove the 100% from the 'font: 400 100% 54px/54px PorscheNextWlaBold' declaration it works as expected and the font is applied. It seems the CSS font shorthand is incorrectly filled.

Expected behavior

Webfont is properly inlined and font declarations are working

Actual behavior (stack traces, console logs etc)

Headlines use Fallback fonts because the font declaration in CSS in wrong.

Library version

2.5.2

Browsers

Chrome 67

jwareing commented 6 years ago

Check out https://github.com/tsayen/dom-to-image/issues/220

shayneslitehouseinc commented 6 years ago

Can the rendering filter of style override this?

MDSLKTR commented 6 years ago

@shayneslitehouseinc I don't think so, this is something Chrome does internally when collapsing font-* properties. But you could try.