search

photopea / Typr.js

Typr.js - process fonts in Javascript
MIT License
914 stars 73 forks source link

Add bold or italic effect to Regular font with no bold and italic font file #50

Closed CNV1018 closed 4 months ago

CNV1018 commented 4 months ago

I have added a Font Style: bold, italic options, to my project for this Typr.js. How can I add bold or italic to each glyph for the selected font that does not comes with bold or italic variant?

photopea commented 4 months ago

Hi, what do you mean? I do not understand what you did.

CNV1018 commented 4 months ago

im using the typr.js library in my project, and i would like to add a function Font Style like Ms Word/Excel, whereby when I click Bold or Italic button the font characters will get bolden or italic.

There are fonts that comes with Bold or Italic font file by default (eg. Arial, Arial Bold, Arial Italic). However, there are some fonts not (eg. Batang, Tahoma, Ms Gothic).

I wonder how I can achieve to have the Regular font style to display in Bold or Italic in Typr.js.

glyph

photopea commented 4 months ago

You would have to modify the geometry of each glyph: path format

We do not have any built-in feature for this :(

CNV1018 commented 4 months ago

The geometry of each glyph means the coordinate of each character itself? eg. { cmds:["M","L","Q","Z"], crds:[0,0,20,80,0,120,-20,80] }

photopea commented 4 months ago

Yes. If you add 10 to each number, it will move 10 pixels to the right and to the bottom, etc.