├── README.md ├── example-webgl ├── font_arial.png └── index.html ├── index.html └── todo.md /README.md: -------------------------------------------------------------------------------- 1 | # Font Texture Generator 2 | 3 | This app is hosted at https://evanw.github.io/font-texture-generator/. 4 | -------------------------------------------------------------------------------- /example-webgl/font_arial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evanw/font-texture-generator/d7e9b16111eddf1833116c19d487ae1a6d55127d/example-webgl/font_arial.png -------------------------------------------------------------------------------- /example-webgl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Font Texture Generator Online 7 | 34 | 35 | 36 |

Font Texture Generator Example

37 |

38 | This example demonstrates using a font texture that was automatically generated by https://evanw.github.io/font-texture-generator/. 39 | The demo below uses signed distance fields to keep text nicely anti-aliased at all scale factors. 40 | Rendering is done in pure WebGL code without any dependencies. 41 |

42 |

43 | 44 | 153 | 354 |

355 | The texture used in this example looks like this: 356 |

357 |

358 | 359 | 360 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Font Texture Generator Online 7 | 76 | 77 | 78 |

Font Texture Generator Online

79 |

80 | This is a simple utility for generating font textures. 81 | See this example for one way of using the generated font texture. 82 | This code is licensed under the CC0 license and lives at https://github.com/evanw/font-texture-generator. 83 | Distance fields are computed using jump flooding for speed with 2x supersampling for quality. 84 | The generator is unicode-aware and even supports emoji. 85 |

86 | 87 | 88 | 89 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 118 | 119 | 120 | 121 | 135 | 136 | 137 | 138 | 149 | 150 | 151 | 152 | 209 | 210 |

Font name:

90 | 91 | 92 | 93 | 94 | Bold 95 | 96 | 97 | 98 | Italic 99 | 100 |

Font size:

Resolution:

109 | 110 | 111 | Smallest 112 | 113 | 114 | 115 | Power of 2 116 | 117 |

Data format:

122 | 123 | 124 | JSON 125 | 126 | 127 | 128 | XML 129 | 130 | 131 | 132 | C 133 | 134 |

Characters:

139 | 140 | 141 | ASCII 142 | 143 | 144 | 145 | Custom: 146 | 147 | 148 |

Display type:

153 | 154 | 155 | Normal 156 | 157 | 158 | 159 | Distance field 160 | 161 |

162 |
163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 192 | 193 | 194 | 195 | 200 | 201 |

Text color:
Background color:
Stroke color:
Stroke thickness:
Stroke join:	183 \| 184 \| 185 \| Round 186 \| 187 \| 188 \| 189 \| Miter 190 \| 191 \|
Shortcuts:	196 \| White on black 197 \| 198 \| White with black stroke 199 \|

202 |

203 |

204 |
205 | Falloff: 206 | 207 |

208 |

211 |

212 | 213 | 214 | 215 |

216 | 217 | 1172 | 1173 | 1174 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | # TODO 2 | 3 | * Detect and fix Chrome's gamma curve to alpha (for font sizes <= 256px) 4 | * Smoother distance fields through better edge distance estimates 5 | * Add a mode to space glyphs evenly in a grid for monospace fonts 6 | * Experiment with extracting kerning values from HTML element widths 7 | --------------------------------------------------------------------------------