imgui/misc/fonts/README.txt

274 lines
12 KiB
Plaintext
Raw Permalink Normal View History

2014-08-30 19:02:55 +00:00
2017-12-12 10:20:45 +00:00
The code in imgui.cpp embeds a copy of 'ProggyClean.ttf' (by Tristan Grimmer) that is used by default.
We embed the font in source code so you can use Dear ImGui without any file system access.
You may also load external .TTF/.OTF files.
The files in this folder are suggested fonts, provided as a convenience.
(Note: .OTF support in stb_truetype.h currently doesn't appear to load every font)
2015-01-18 12:19:49 +00:00
2018-05-14 15:59:12 +00:00
Fonts are rasterized in a single texture at the time of calling either of io.Fonts->GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build().
2017-12-12 10:20:45 +00:00
Also read dear imgui FAQ in imgui.cpp!
2018-08-27 07:36:15 +00:00
If you have other loading/merging/adding fonts, you can post on the Dear ImGui "Getting Started" forum:
https://discourse.dearimgui.org/c/getting-started
---------------------------------------
INDEX:
---------------------------------------
2017-12-12 10:20:45 +00:00
2018-05-14 15:59:12 +00:00
- Readme First / FAQ
2017-12-12 10:20:45 +00:00
- Using Icons
- Fonts Loading Instructions
- FreeType rasterizer, Small font sizes
- Building Custom Glyph Ranges
- Embedding Fonts in Source Code
- Credits/Licences for fonts included in this folder
- Links, Other fonts
2018-05-14 15:59:12 +00:00
---------------------------------------
README FIRST / FAQ
---------------------------------------
- You can use the style editor ImGui::ShowStyleEditor() to browse your fonts and understand what's going on if you have an issue.
- Make sure your font ranges data are persistent (available during the call to GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build().
2018-06-06 11:02:19 +00:00
- Use C++11 u8"my text" syntax to encode literal strings as UTF-8. e.g.:
u8"hello"
u8"こんにちは" // this will be encoded as UTF-8
2018-05-14 15:59:12 +00:00
- If you want to include a backslash \ character in your string literal, you need to double them e.g. "folder\\filename".
2018-08-27 07:36:15 +00:00
- Please use the Discourse forum (https://discourse.dearimgui.org) and not the Github issue tracker.
2018-05-14 15:59:12 +00:00
2017-12-12 10:20:45 +00:00
---------------------------------------
2016-11-06 21:53:36 +00:00
USING ICONS
2017-12-12 10:20:45 +00:00
---------------------------------------
2016-11-06 21:53:36 +00:00
Using an icon font (such as FontAwesome: http://fontawesome.io) is an easy and practical way to use icons in your ImGui application.
2017-12-12 10:20:45 +00:00
A common pattern is to merge the icon font within your main font, so you can embed icons directly from your strings without
having to change fonts back and forth.
To refer to the icon UTF-8 codepoints from your C++ code, you may use those headers files created by Juliette Foucaut:
https://github.com/juliettef/IconFontCppHeaders
The C++11 version of those files uses the u8"" utf-8 encoding syntax + \u
#define ICON_FA_SEARCH u8"\uf002"
The pre-C++11 version has the values directly encoded as utf-8:
#define ICON_FA_SEARCH "\xEF\x80\x82"
Example:
2016-11-06 21:53:36 +00:00
// Merge icons into default tool font
#include "IconsFontAwesome.h"
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault();
2017-12-12 10:20:45 +00:00
2016-11-06 21:53:36 +00:00
ImFontConfig config;
config.MergeMode = true;
config.GlyphMinAdvanceX = 13.0f; // Use if you want to make the icon monospaced
2017-08-07 07:21:21 +00:00
static const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
2016-11-06 21:53:36 +00:00
io.Fonts->AddFontFromFileTTF("fonts/fontawesome-webfont.ttf", 13.0f, &config, icon_ranges);
2017-08-07 07:21:21 +00:00
2016-11-06 21:53:36 +00:00
// Usage, e.g.
2018-04-26 12:56:46 +00:00
ImGui::Button(ICON_FA_SEARCH " Search"); // C string literals can be concatenated at compilation time, this is the same as "A" "B" becoming "AB"
ImGui::Text("%s among %d items", ICON_FA_SEARCH, count);
2017-12-12 10:20:45 +00:00
See Links below for other icons fonts and related tools.
2017-12-12 10:20:45 +00:00
---------------------------------------
2016-11-06 21:53:36 +00:00
FONTS LOADING INSTRUCTIONS
2017-12-12 10:20:45 +00:00
---------------------------------------
2014-08-30 19:02:55 +00:00
Load default font:
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault();
Load .TTF/.OTF file with:
2015-01-18 12:19:49 +00:00
ImGuiIO& io = ImGui::GetIO();
ImFont* font1 = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
ImFont* font2 = io.Fonts->AddFontFromFileTTF("anotherfont.otf", size_pixels);
2015-01-08 23:49:17 +00:00
// Select font at runtime
ImGui::Text("Hello"); // use the default font (which is the first loaded font)
ImGui::PushFont(font2);
ImGui::Text("Hello with another font");
ImGui::PopFont();
For advanced options create a ImFontConfig structure and pass it to the AddFont function (it will be copied internally):
ImFontConfig config;
config.OversampleH = 3;
config.OversampleV = 1;
config.GlyphExtraSpacing.x = 1.0f;
ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, &config);
2018-08-27 07:36:15 +00:00
If you have very large number of glyphs or multiple fonts, the texture may become too big for your graphics API.
The typical result of failing to upload a texture is if every glyphs appears as white rectangles.
In particular, using a large range such as GetGlyphRangesChineseSimplifiedCommon() is not recommended unless you
set OversampleH/OversampleV to 1 and use a small font size.
Mind the fact that some graphics drivers have texture size limitation.
If you are building a PC application, mind the fact that your users may use hardware with lower limitations than yours.
Some solutions:
2018-08-27 07:36:15 +00:00
- 1) Reduce glyphs ranges by calculating them from source localization data. You can use ImFont::GlyphRangesBuilder for this purpose,
this will be the biggest win.
- 2) You may reduce oversampling, e.g. config.OversampleH = config.OversampleV = 1, this will largely reduce your texture size.
- 3) Set io.Fonts.TexDesiredWidth to specify a texture width to minimize texture height (see comment in ImFontAtlas::Build function).
- 4) Set io.Fonts.Flags |= ImFontAtlasFlags_NoPowerOfTwoHeight; to disable rounding the texture height to the next power of two.
2015-08-06 03:59:07 +00:00
Combine two fonts into one:
// Load a first font
ImFont* font = io.Fonts->AddFontDefault();
// Add character ranges and merge into the previous font
// The ranges array is not copied by the AddFont* functions and is used lazily
// so ensure it is available for duration of font usage
static const ImWchar icons_ranges[] = { 0xf000, 0xf3ff, 0 }; // will not be copied by AddFont* so keep in scope.
ImFontConfig config;
config.MergeMode = true;
io.Fonts->AddFontFromFileTTF("DroidSans.ttf", 18.0f, &config, io.Fonts->GetGlyphRangesJapanese());
io.Fonts->AddFontFromFileTTF("fontawesome-webfont.ttf", 18.0f, &config, icons_ranges);
Add a fourth parameter to bake specific font ranges only:
2014-08-30 19:02:55 +00:00
2015-08-06 03:59:07 +00:00
// Basic Latin, Extended Latin
2015-08-06 04:00:27 +00:00
io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesDefault());
2015-08-06 03:59:07 +00:00
2018-06-06 11:02:19 +00:00
// Default + Selection of 2500 Ideographs used by Simplified Chinese
io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
2015-08-06 03:59:07 +00:00
// Default + Hiragana, Katakana, Half-Width, Selection of 1946 Ideographs
2018-06-06 11:02:19 +00:00
io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesJapanese());
2014-09-26 00:20:56 +00:00
2018-06-06 11:02:19 +00:00
See "BUILDING CUSTOM GLYPH RANGES" section to create your own ranges.
Offset font vertically by altering the io.Font->DisplayOffset value:
2014-09-26 00:20:56 +00:00
2015-08-06 04:00:27 +00:00
ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
font->DisplayOffset.y = 1; // Render 1 pixel down
2014-08-30 19:02:55 +00:00
2017-12-12 10:20:45 +00:00
---------------------------------------
FREETYPE RASTERIZER, SMALL FONT SIZES
---------------------------------------
Dear Imgui uses stb_truetype.h to rasterize fonts (with optional oversampling).
This technique and implementation are not ideal for fonts rendered at _small sizes_, which may appear a little blurry.
There is an implementation of the ImFontAtlas builder using FreeType that you can use in the misc/freetype/ folder.
2017-12-12 10:20:45 +00:00
FreeType supports auto-hinting which tends to improve the readability of small fonts.
Note that this code currently creates textures that are unoptimally too large (could be fixed with some work)
---------------------------------------
BUILDING CUSTOM GLYPH RANGES
2017-12-12 10:20:45 +00:00
---------------------------------------
You can use the ImFontAtlas::GlyphRangesBuilder helper to create glyph ranges based on text input.
For example: for a game where your script is known, if you can feed your entire script to it and only build the characters the game needs.
ImVector<ImWchar> ranges;
ImFontAtlas::GlyphRangesBuilder builder;
builder.AddText("Hello world"); // Add a string (here "Hello world" contains 7 unique characters)
builder.AddChar(0x7262); // Add a specific character
builder.AddRanges(io.Fonts->GetGlyphRangesJapanese()); // Add one of the default ranges
builder.BuildRanges(&ranges); // Build the final result (ordered ranges with all the unique characters submitted)
io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_in_pixels, NULL, ranges.Data);
2017-12-12 10:20:45 +00:00
---------------------------------------
EMBEDDING FONTS IN SOURCE CODE
---------------------------------------
2015-08-06 03:59:07 +00:00
2017-11-11 15:20:34 +00:00
Compile and use 'binary_to_compressed_c.cpp' to create a compressed C style array that you can embed in source code.
2017-05-02 08:43:00 +00:00
See the documentation in binary_to_compressed_c.cpp for instruction on how to use the tool.
2017-11-11 15:20:34 +00:00
You may find a precompiled version binary_to_compressed_c.exe for Windows instead of demo binaries package (see README).
The tool optionally used Base85 encoding to reduce the size of _source code_ but the read-only arrays will be about 20% bigger.
2017-05-02 08:43:00 +00:00
Then load the font with:
ImFont* font = io.Fonts->AddFontFromMemoryCompressedTTF(compressed_data, compressed_data_size, size_pixels, ...);
2018-08-27 07:36:15 +00:00
or:
2015-08-06 03:59:07 +00:00
ImFont* font = io.Fonts->AddFontFromMemoryCompressedBase85TTF(compressed_data_base85, size_pixels, ...);
2017-12-12 10:20:45 +00:00
---------------------------------------
CREDITS/LICENSES FOR FONTS INCLUDED IN THIS FOLDER
---------------------------------------
Roboto-Medium.ttf
Apache License 2.0
by Christian Robertson
https://fonts.google.com/specimen/Roboto
2015-08-06 03:59:07 +00:00
Cousine-Regular.ttf
by Steve Matteson
2015-08-06 03:59:07 +00:00
Digitized data copyright (c) 2010 Google Corporation.
Licensed under the SIL Open Font License, Version 1.1
https://fonts.google.com/specimen/Cousine
2015-08-06 03:59:07 +00:00
DroidSans.ttf
Copyright (c) Steve Matteson
Apache License, version 2.0
2017-11-26 10:44:52 +00:00
https://www.fontsquirrel.com/fonts/droid-sans
2015-08-06 03:59:07 +00:00
ProggyClean.ttf
Copyright (c) 2004, 2005 Tristan Grimmer
MIT License
recommended loading setting in ImGui: Size = 13.0, DisplayOffset.Y = +1
http://www.proggyfonts.net/
2015-08-06 03:59:07 +00:00
ProggyTiny.ttf
Copyright (c) 2004, 2005 Tristan Grimmer
MIT License
recommended loading setting in ImGui: Size = 10.0, DisplayOffset.Y = +1
http://www.proggyfonts.net/
2015-08-06 03:59:07 +00:00
Karla-Regular.ttf
2015-08-06 03:59:07 +00:00
Copyright (c) 2012, Jonathan Pinhorn
SIL OPEN FONT LICENSE Version 1.1
2017-12-12 10:20:45 +00:00
---------------------------------------
LINKS, OTHER FONTS
---------------------------------------
2015-08-06 03:59:07 +00:00
2017-11-11 15:20:34 +00:00
(Icons) Icon fonts
2015-11-24 15:35:07 +00:00
https://fortawesome.github.io/Font-Awesome/
https://github.com/SamBrishes/kenney-icon-font
https://design.google.com/icons/
2017-11-11 15:20:34 +00:00
You can use https://github.com/juliettef/IconFontCppHeaders for C/C++ header files with name #define to access icon codepoint in source code.
2015-11-24 15:35:07 +00:00
2017-11-11 15:20:34 +00:00
(Icons) IcoMoon - Custom Icon font builder
2017-08-07 07:21:21 +00:00
https://icomoon.io/app
2017-11-11 15:20:34 +00:00
(Regular) Open Sans Fonts
https://fonts.google.com/specimen/Open+Sans
(Regular) Google Noto Fonts (worldwide languages)
https://www.google.com/get/noto/
2015-08-11 20:45:42 +00:00
2017-11-11 15:20:34 +00:00
(Monospace) Typefaces for source code beautification
https://github.com/chrissimpkins/codeface
(Monospace) Programmation fonts
2015-08-11 20:45:42 +00:00
http://s9w.github.io/font_compare/
2015-08-06 03:59:07 +00:00
2017-11-11 15:20:34 +00:00
(Monospace) Proggy Programming Fonts
2015-08-06 03:59:07 +00:00
http://upperbounds.net
2017-11-11 15:20:34 +00:00
(Monospace) Inconsolata
2015-08-06 03:59:07 +00:00
http://www.levien.com/type/myfonts/inconsolata.html
2017-11-11 15:20:34 +00:00
(Monospace) Adobe Source Code Pro: Monospaced font family for user interface and coding environments
2015-08-06 03:59:07 +00:00
https://github.com/adobe-fonts/source-code-pro
2017-11-11 15:20:34 +00:00
(Monospace) Monospace/Fixed Width Programmer's Fonts
2015-08-06 03:59:07 +00:00
http://www.lowing.org/fonts/
(Japanese) M+ fonts by Coji Morishita are free and include most useful Kanjis you would need.
http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/index-en.html
Or use Arial Unicode or other Unicode fonts provided with Windows for full characters coverage (not sure of their licensing).
2017-12-12 10:20:45 +00:00