Created
October 10, 2017 13:51
-
-
Save Alhadis/0af615e679f4fa1d0c2b5ae3113ee0a3 to your computer and use it in GitHub Desktop.
Glyph-Clipping-Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "IcoMoonType": "selection", | |
| "icons": [ | |
| { | |
| "icon": { | |
| "paths": [ | |
| "M843.523 512c0 183.095-148.428 331.523-331.523 331.523s-331.523-148.428-331.523-331.523 148.428-331.523 331.523-331.523 331.523 148.428 331.523 331.523zM512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512z" | |
| ], | |
| "attrs": [ | |
| {} | |
| ], | |
| "isMulticolor": false, | |
| "isMulticolor2": false, | |
| "grid": 0, | |
| "tags": [ | |
| "annulus-4pt" | |
| ] | |
| }, | |
| "attrs": [ | |
| {} | |
| ], | |
| "properties": { | |
| "order": 2, | |
| "id": 1, | |
| "name": "annulus-4pt", | |
| "prevSize": 32, | |
| "code": 52 | |
| }, | |
| "setIdx": 0, | |
| "setId": 0, | |
| "iconIdx": 0 | |
| }, | |
| { | |
| "icon": { | |
| "paths": [ | |
| "M255.422 955.094c-340.563-196.338-340.563-689.849-0-886.187s768.578 50.417 768.578 443.094-428.015 639.432-768.578 443.094zM843.523 512c0-254.261-277.143-414.037-497.659-286.906s-220.517 446.682 0 573.812 497.659-32.645 497.659-286.906z" | |
| ], | |
| "attrs": [ | |
| {} | |
| ], | |
| "isMulticolor": false, | |
| "isMulticolor2": false, | |
| "grid": 0, | |
| "tags": [ | |
| "annulus-3pt" | |
| ] | |
| }, | |
| "attrs": [ | |
| {} | |
| ], | |
| "properties": { | |
| "order": 3, | |
| "id": 0, | |
| "name": "annulus-3pt", | |
| "prevSize": 32, | |
| "code": 51 | |
| }, | |
| "setIdx": 0, | |
| "setId": 0, | |
| "iconIdx": 1 | |
| } | |
| ], | |
| "height": 1024, | |
| "metadata": { | |
| "name": "glyph-clip-demo" | |
| }, | |
| "preferences": { | |
| "showGlyphs": true, | |
| "showCodes": true, | |
| "showQuickUse": true, | |
| "showQuickUse2": true, | |
| "showSVGs": true, | |
| "fontPref": { | |
| "prefix": "icon-", | |
| "metadata": { | |
| "fontFamily": "glyph-clip-demo", | |
| "majorVersion": 1, | |
| "minorVersion": 0 | |
| }, | |
| "metrics": { | |
| "emSize": 1024, | |
| "baseline": 6.25, | |
| "whitespace": 50 | |
| }, | |
| "embed": false, | |
| "showMetrics": true, | |
| "showMetadata": true, | |
| "showVersion": true | |
| }, | |
| "imagePref": { | |
| "prefix": "icon-", | |
| "png": true, | |
| "useClassSelector": true, | |
| "color": 0, | |
| "bgColor": 16777215 | |
| }, | |
| "historySize": 50, | |
| "gridSize": 16 | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-AU"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="initial-scale=1, minimum-scale=1" /> | |
| <title>Edge Clipping Example</title> | |
| <style> | |
| /* Preformatting */ | |
| *{ | |
| tab-size: 4; | |
| box-sizing: border-box; | |
| } | |
| :focus{ | |
| outline: none; | |
| } | |
| /* Case-specific styling */ | |
| @font-face{ | |
| font-family: GlyphClipDemo; | |
| src: url("data:application/octet-stream;base64,d09GMgABAAAAAAKIAAsAAAAABTwAAAI6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAVBEICoIYgh8LDgABNgIkAxgEIAWDZgcgG3IEyC4KbCJjT+iMjWkjQvdwnyVvEv9tniwenj/8nfv+WCucEwNaxm3dolFhlGhm9Q1aa7O3L4iFeKGgIu+WsKYaEo3MhfxxpeLK88t7XR/URjSzZjyBGpggIXr+j18adSl/89LHz1/4kfZbSucGHqwVIxCgYOxDiVULVrBYQEsddDcwEG8f+HW2g0wPkh3kSFeJg3djmvjyazAsQ+AZOGxLahp1amdWkhlYmCKhRMW+OqegrChJwoqC/QOsyE+vMfY9KgAQYmmAPKiigCvwDKAKCCEkqSnNyOh2w1plWIhVOSyvOccSY1dDgWUBTAOMLfFBLnVyvcT4pCfBk0fJJz9z3rzGeCxxmE67030UuPi/u9bFT4XbQWlreuLVw/bD/r6AihT5oA5tevJwp+/C0JdtZ87OqRMhiyKqFkyj4GksiIyORgoaG12ESAE75EvaNbvWvbbWrUTsAhgpYIf8BZEAS7kgc0AQfP9WPJ1e8V+s6AC/cXsJuNVyIjOgKIFgMWdAFmQ5ZTwfbCS8+zIQyFulgIR1C3WfCBAaCJAUfCBARsM5ArIafhAgp2ILAXkN1wgoG3tBRRIR5tJTktR9kYy5SSrLxUlOXwnJm1ubV3ZYWZwxrzVzzY9lrv9LYOEU42WVaR5QtvpMC0xcPOf5/y93e9cQE78AGw83Va4sOTMNrqP/zdidQx8TixCnWf7Rztto23ky2zrv+XPCA6OJh1uQysLEzcRvVpDJAtWcGFWreR6dPMrkWSgLAAAA") format("woff2"); | |
| } | |
| :root{ | |
| font-family: sans-serif; | |
| } | |
| html{ | |
| background: #aaa; | |
| } | |
| body{ | |
| background: #fff; | |
| box-shadow: 0 0 .5em #000; | |
| border-radius: .5em; | |
| max-width: 320px; | |
| margin: 0 auto; | |
| } | |
| figure{ | |
| padding: 1em; | |
| text-align: center; | |
| } | |
| .glyph{ | |
| font: 10em GlyphClipDemo; | |
| } | |
| figcaption{ | |
| padding: 1em; | |
| max-width: 208px; | |
| margin: 0 auto; | |
| line-height: 1.5; | |
| } | |
| figcaption > b{ | |
| display: block; | |
| text-transform: uppercase; | |
| font-size: 1.5em; | |
| line-height: 1.1; | |
| margin-bottom: .85em; | |
| } | |
| @media (min-width: 640px){ | |
| .glyph{ | |
| font-size: 208px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <figure> | |
| <div class="glyph">3</div> | |
| <figcaption><b>3-point circle</b> Spurious clipping around edges, but only after being reduced in point size past ~160pt</figcaption> | |
| </figure> | |
| <figure> | |
| <div class="glyph">4</div> | |
| <figcaption><b>4-point circle</b> Renders normally</figcaption> | |
| </figure> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment