Closed zachleat closed 9 months ago
Similarly, allows you to modify the unicode-range (input your existing unicode-range value) and the selections will be updated to reflect the value.
Include a checkbox to Show only selected Glyphs
For example: http://fonts.googleapis.com/css?family=Raleway:400
resolves to:
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v11/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
Related https://codepen.io/elifitch/pen/Ljqway by @elifitch
Use
opentype.js
to create a tool that automates unicode-range values.Something similar to: https://opentype.js.org/glyph-inspector.html
Shows each glyph and has every glyph selected. Live updates a preview of the @font-face block with new
unicode-range
value as the user deselects glyphs from the list that they want to be excluded from theunicode-range
.Some overlap with http://kourge.net/projects/regexp-unicode-block maybe?
Thought of this idea after seeing @jakearchibald’s tweets and blog posts this week: https://twitter.com/jaffathecake/status/860550984233353216