Paper.js: Font styling

[khurramraheel]

Shouldn't there be a fontStyle property for text that will allow italic effect to text?

[lehni]

I'm pretty sure you can already use fontWeight for that… The naming is a bit unclear. Personally I think it was a mistake to have both font-style and font-weight in the CSS specs, since in the end, any combination of style and weight results in a new "cut" of a typeface, and browsers shouldn't really be concerned with anything else than which "cut" to load. They also shouldn't produce the fake bolds / italics when they are missing, which they unfortunately do. I think we should have one or the other, not both. But perhaps fontStyle is the better name than fontWeight?

[khurramraheel]

Yes, it worked :).

fontStyle seems more sensible in the case. Or we can separate them too, if possible.

[lehni]

As stated, the distinction between fontStyle and fontWeight is somewhat arbitrary, and not actually reflected in the font formats. See for example the pull down menu of available actual weights for Helvetica:

Making this distinction leads to situations where missing weights have to be emulated by the browser by messing with the glyph outlines, which is really bad practice, typographically speaking. So I don't think we should offer both.

[plong0]

Thanks for clarifying. It could be nice if the documentation for the fontWeight property listed possible values or if in the examples there was an example of text features.

[SkepticaLee]

I have difficulties getting both bold and italic to display in fonts which are present as bold, italic and bold-italic faces. Also some "weights" (such as "black", as in Arial Black) cannot be set by using the string "black", but using the weight integer 900 instead.

I agree that emulating missing font weights would be bad practice, but quite a number of fonts have the bold-italic (or bold-oblique) face and they are not currently rendered/supported by paperjs.

[plong0]

I was able to have _bold-italic_ with:
item.fontWeight = 'Bold Italic';

Tested with:
item.fontFamily = 'sans-serif';
and
item.fontFamily = 'serif';

[truongngoctuan]

it also works for number: "600 italic"