![]() Obviously webkit-text-stroke outlines the exact bézier anatomy of a glyph/character resulting in undesired outlines for every glyph component. Variable fonts however allow a segemented/overlapping construction of glyphs/characters to facilitate the interpolation between different font weights and widths. you might still encounter this concept in svg-clipping paths - not perfectly rendering in some browsers). ![]() Counter shapes like the aforementioned hole were based on simple rules like a counterclockwise path directions – btw. ![]() You could imagine them as rather 'merged down' compound paths. Otherwise you would have encountered undesired even/odd issues resulting in excluded shapes caused by overlapping path areas.Īpplying this construction method, you will never see any overlap of shapes. 'Traditional' fonts (so before variable fonts) – only contained an outline shape and maybe a counter shape e.g the cut out inner 'hole' of a lowercase e glyph. The reason for these inner outlines is based on the structure of some variable fonts. Anatomy of a variable fontĪs pointed out this rendering behaviour is related to variable fonts. The text-shadow as proposed by Kumar is probably the most reliable Taylor's approach – duplicating text to a background pseudo element – also provides a good workaround. TL DR: -webkit-text-stroke is still quite unpredictable
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |