Font readme: Added OpenFontIcons, tweaks, links, removed spaces (#2141)

This commit is contained in:
omar 2018-10-22 11:54:57 +02:00
parent 82873c7ad4
commit e610afeea3

View File

@ -32,32 +32,33 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
README FIRST / FAQ 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. - 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(). - Make sure your font ranges data are persistent (available during the call to GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build().
- Use C++11 u8"my text" syntax to encode literal strings as UTF-8. e.g.: - Use C++11 u8"my text" syntax to encode literal strings as UTF-8. e.g.:
u8"hello" u8"hello"
u8"こんにちは" // this will be encoded as UTF-8 u8"こんにちは" // this will be encoded as UTF-8
- If you want to include a backslash \ character in your string literal, you need to double them e.g. "folder\\filename". - If you want to include a backslash \ character in your string literal, you need to double them e.g. "folder\\filename".
- Please use the Discourse forum (https://discourse.dearimgui.org) and not the Github issue tracker for basic font loading questions. - Please use the Discourse forum (https://discourse.dearimgui.org) and not the Github issue tracker for basic font loading questions.
--------------------------------------- ---------------------------------------
USING ICONS USING ICONS
--------------------------------------- ---------------------------------------
Using an icon font (such as FontAwesome: http://fontawesome.io) is an easy and practical way to use icons in your ImGui application. Using an icon font (such as FontAwesome: http://fontawesome.io or OpenFontIcons. https://github.com/traverseda/OpenFontIcons)
A common pattern is to merge the icon font within your main font, so you can embed icons directly from your strings without is an easy and practical way to use icons in your Dear ImGui application.
having to change fonts back and forth. 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: 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 https://github.com/juliettef/IconFontCppHeaders
The C++11 version of those files uses the u8"" utf-8 encoding syntax + \u The C++11 version of those files uses the u8"" utf-8 encoding syntax + \u
#define ICON_FA_SEARCH u8"\uf002" #define ICON_FA_SEARCH u8"\uf002"
The pre-C++11 version has the values directly encoded as utf-8: The pre-C++11 version has the values directly encoded as utf-8:
#define ICON_FA_SEARCH "\xEF\x80\x82" #define ICON_FA_SEARCH "\xEF\x80\x82"
Example: Example Setup:
// Merge icons into default tool font // Merge icons into default tool font
#include "IconsFontAwesome.h" #include "IconsFontAwesome.h"
@ -70,27 +71,27 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
static const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 }; static const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
io.Fonts->AddFontFromFileTTF("fonts/fontawesome-webfont.ttf", 13.0f, &config, icon_ranges); io.Fonts->AddFontFromFileTTF("fonts/fontawesome-webfont.ttf", 13.0f, &config, icon_ranges);
Example Usage:
// Usage, e.g. // Usage, e.g.
ImGui::Text("%s among %d items", ICON_FA_SEARCH, count);
ImGui::Button(ICON_FA_SEARCH " Search"); ImGui::Button(ICON_FA_SEARCH " Search");
// C string _literals_ can be concatenated at compilation time, e.g. "hello" " world" // C string _literals_ can be concatenated at compilation time, e.g. "hello" " world"
// ICON_FA_SEARCH is defined as a string literal so this is the same as "A" "B" becoming "AB" // ICON_FA_SEARCH is defined as a string literal so this is the same as "A" "B" becoming "AB"
// Usage, e.g. See Links below for other icons fonts and related tools.
ImGui::Text("%s among %d items", ICON_FA_SEARCH, count);
See Links below for other icons fonts and related tools.
--------------------------------------- ---------------------------------------
FONTS LOADING INSTRUCTIONS FONTS LOADING INSTRUCTIONS
--------------------------------------- ---------------------------------------
Load default font: Load default font:
ImGuiIO& io = ImGui::GetIO(); ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault(); io.Fonts->AddFontDefault();
Load .TTF/.OTF file with: Load .TTF/.OTF file with:
ImGuiIO& io = ImGui::GetIO(); ImGuiIO& io = ImGui::GetIO();
ImFont* font1 = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels); ImFont* font1 = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
@ -102,7 +103,7 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
ImGui::Text("Hello with another font"); ImGui::Text("Hello with another font");
ImGui::PopFont(); ImGui::PopFont();
For advanced options create a ImFontConfig structure and pass it to the AddFont function (it will be copied internally): For advanced options create a ImFontConfig structure and pass it to the AddFont function (it will be copied internally):
ImFontConfig config; ImFontConfig config;
config.OversampleH = 3; config.OversampleH = 3;
@ -110,13 +111,13 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
config.GlyphExtraSpacing.x = 1.0f; config.GlyphExtraSpacing.x = 1.0f;
ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, &config); ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, &config);
If you have very large number of glyphs or multiple fonts, the texture may become too big for your graphics API. 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. 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 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. set OversampleH/OversampleV to 1 and use a small font size.
Mind the fact that some graphics drivers have texture size limitation. 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. If you are building a PC application, mind the fact that your users may use hardware with lower limitations than yours.
Some solutions: Some solutions:
- 1) Reduce glyphs ranges by calculating them from source localization data. You can use ImFont::GlyphRangesBuilder for this purpose, - 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. this will be the biggest win.
@ -124,7 +125,7 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
- 3) Set io.Fonts.TexDesiredWidth to specify a texture width to minimize texture height (see comment in ImFontAtlas::Build function). - 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. - 4) Set io.Fonts.Flags |= ImFontAtlasFlags_NoPowerOfTwoHeight; to disable rounding the texture height to the next power of two.
Combine two fonts into one: Combine two fonts into one:
// Load a first font // Load a first font
ImFont* font = io.Fonts->AddFontDefault(); ImFont* font = io.Fonts->AddFontDefault();
@ -139,7 +140,7 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
io.Fonts->AddFontFromFileTTF("fontawesome-webfont.ttf", 18.0f, &config, icons_ranges); io.Fonts->AddFontFromFileTTF("fontawesome-webfont.ttf", 18.0f, &config, icons_ranges);
io.Fonts->Build(); io.Fonts->Build();
Add a fourth parameter to bake specific font ranges only: Add a fourth parameter to bake specific font ranges only:
// Basic Latin, Extended Latin // Basic Latin, Extended Latin
io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesDefault()); io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesDefault());
@ -150,8 +151,8 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
// Default + Hiragana, Katakana, Half-Width, Selection of 1946 Ideographs // Default + Hiragana, Katakana, Half-Width, Selection of 1946 Ideographs
io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesJapanese()); io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels, NULL, io.Fonts->GetGlyphRangesJapanese());
See "BUILDING CUSTOM GLYPH RANGES" section to create your own ranges. See "BUILDING CUSTOM GLYPH RANGES" section to create your own ranges.
Offset font vertically by altering the io.Font->DisplayOffset value: Offset font vertically by altering the io.Font->DisplayOffset value:
ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels); ImFont* font = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
font->DisplayOffset.y = 1; // Render 1 pixel down font->DisplayOffset.y = 1; // Render 1 pixel down
@ -161,23 +162,23 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
FREETYPE RASTERIZER, SMALL FONT SIZES FREETYPE RASTERIZER, SMALL FONT SIZES
--------------------------------------- ---------------------------------------
Dear ImGui uses imstb_truetype.h to rasterize fonts (with optional oversampling). Dear ImGui uses imstb_truetype.h to rasterize fonts (with optional oversampling).
This technique and its implementation are not ideal for fonts rendered at _small sizes_, which may appear a This technique and its implementation are not ideal for fonts rendered at _small sizes_, which may appear a
little blurry or hard to read. little blurry or hard to read.
There is an implementation of the ImFontAtlas builder using FreeType that you can use in the misc/freetype/ folder. There is an implementation of the ImFontAtlas builder using FreeType that you can use in the misc/freetype/ folder.
FreeType supports auto-hinting which tends to improve the readability of small fonts. 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). Note that this code currently creates textures that are unoptimally too large (could be fixed with some work).
Also note that correct sRGB space blending will have an important effect on your font rendering quality. Also note that correct sRGB space blending will have an important effect on your font rendering quality.
--------------------------------------- ---------------------------------------
BUILDING CUSTOM GLYPH RANGES BUILDING CUSTOM GLYPH RANGES
--------------------------------------- ---------------------------------------
You can use the ImFontAtlas::GlyphRangesBuilder helper to create glyph ranges based on text input. 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. 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; ImVector<ImWchar> ranges;
ImFontAtlas::GlyphRangesBuilder builder; ImFontAtlas::GlyphRangesBuilder builder;
@ -194,14 +195,14 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
EMBEDDING FONTS IN SOURCE CODE EMBEDDING FONTS IN SOURCE CODE
--------------------------------------- ---------------------------------------
Compile and use 'binary_to_compressed_c.cpp' to create a compressed C style array that you can embed in source code. Compile and use 'binary_to_compressed_c.cpp' to create a compressed C style array that you can embed in source code.
See the documentation in binary_to_compressed_c.cpp for instruction on how to use the tool. See the documentation in binary_to_compressed_c.cpp for instruction on how to use the tool.
You may find a precompiled version binary_to_compressed_c.exe for Windows instead of demo binaries package (see README). 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. The tool optionally used Base85 encoding to reduce the size of _source code_ but the read-only arrays will be about 20% bigger.
Then load the font with: Then load the font with:
ImFont* font = io.Fonts->AddFontFromMemoryCompressedTTF(compressed_data, compressed_data_size, size_pixels, ...); ImFont* font = io.Fonts->AddFontFromMemoryCompressedTTF(compressed_data, compressed_data_size, size_pixels, ...);
or: or:
ImFont* font = io.Fonts->AddFontFromMemoryCompressedBase85TTF(compressed_data_base85, size_pixels, ...); ImFont* font = io.Fonts->AddFontFromMemoryCompressedBase85TTF(compressed_data_base85, size_pixels, ...);
@ -209,82 +210,101 @@ If you have other loading/merging/adding fonts, you can post on the Dear ImGui "
CREDITS/LICENSES FOR FONTS INCLUDED IN THIS FOLDER CREDITS/LICENSES FOR FONTS INCLUDED IN THIS FOLDER
--------------------------------------- ---------------------------------------
Roboto-Medium.ttf Roboto-Medium.ttf
Apache License 2.0 Apache License 2.0
by Christian Robertson by Christian Robertson
https://fonts.google.com/specimen/Roboto https://fonts.google.com/specimen/Roboto
Cousine-Regular.ttf Cousine-Regular.ttf
by Steve Matteson by Steve Matteson
Digitized data copyright (c) 2010 Google Corporation. Digitized data copyright (c) 2010 Google Corporation.
Licensed under the SIL Open Font License, Version 1.1 Licensed under the SIL Open Font License, Version 1.1
https://fonts.google.com/specimen/Cousine https://fonts.google.com/specimen/Cousine
DroidSans.ttf DroidSans.ttf
Copyright (c) Steve Matteson Copyright (c) Steve Matteson
Apache License, version 2.0 Apache License, version 2.0
https://www.fontsquirrel.com/fonts/droid-sans https://www.fontsquirrel.com/fonts/droid-sans
ProggyClean.ttf ProggyClean.ttf
Copyright (c) 2004, 2005 Tristan Grimmer Copyright (c) 2004, 2005 Tristan Grimmer
MIT License MIT License
recommended loading setting in ImGui: Size = 13.0, DisplayOffset.Y = +1 recommended loading setting in ImGui: Size = 13.0, DisplayOffset.Y = +1
http://www.proggyfonts.net/ http://www.proggyfonts.net/
ProggyTiny.ttf ProggyTiny.ttf
Copyright (c) 2004, 2005 Tristan Grimmer Copyright (c) 2004, 2005 Tristan Grimmer
MIT License MIT License
recommended loading setting in ImGui: Size = 10.0, DisplayOffset.Y = +1 recommended loading setting in ImGui: Size = 10.0, DisplayOffset.Y = +1
http://www.proggyfonts.net/ http://www.proggyfonts.net/
Karla-Regular.ttf Karla-Regular.ttf
Copyright (c) 2012, Jonathan Pinhorn Copyright (c) 2012, Jonathan Pinhorn
SIL OPEN FONT LICENSE Version 1.1 SIL OPEN FONT LICENSE Version 1.1
--------------------------------------- ---------------------------------------
LINKS, OTHER FONTS FONTS LINKS
--------------------------------------- ---------------------------------------
(Icons) Icon fonts ICON FONTS
https://fortawesome.github.io/Font-Awesome/
https://github.com/SamBrishes/kenney-icon-font
https://design.google.com/icons/
You can use https://github.com/juliettef/IconFontCppHeaders for C/C++ header files with name #define to access icon codepoint in source code.
(Icons) IcoMoon - Custom Icon font builder C/C++ header for icon fonts (#define with code points to use in source code string literals)
https://github.com/juliettef/IconFontCppHeaders
FontAwesome
https://fortawesome.github.io/Font-Awesome
OpenFontIcons
https://github.com/traverseda/OpenFontIcons
Google Icon Fonts
https://design.google.com/icons/
Kenney Icon Font (Game Controller Icons)
https://github.com/nicodinh/kenney-icon-font
IcoMoon - Custom Icon font builder
https://icomoon.io/app https://icomoon.io/app
(Pixel perfect) Sweet16, Sweet16 Mono, by Martin Sedlak (Latin + Supplemental + Extended A) REGULAR FONTS
Google Noto Fonts (worldwide languages)
https://www.google.com/get/noto/
Open Sans Fonts
https://fonts.google.com/specimen/Open+Sans
(Japanese) M+ fonts by Coji Morishita are free
http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/index-en.html
MONOSPACE FONTS
(Pixel Perfect) Proggy Fonts, by Tristan Grimmer
http://www.proggyfonts.net or http://upperbounds.net
(Pixel Perfect) Sweet16, Sweet16 Mono, by Martin Sedlak (Latin + Supplemental + Extended A)
https://github.com/kmar/Sweet16Font https://github.com/kmar/Sweet16Font
Also include .inl file to use directly in dear imgui. Also include .inl file to use directly in dear imgui.
(Regular) Open Sans Fonts Typefaces for source code beautification
https://fonts.google.com/specimen/Open+Sans
(Regular) Google Noto Fonts (worldwide languages)
https://www.google.com/get/noto/
(Monospace) Typefaces for source code beautification
https://github.com/chrissimpkins/codeface https://github.com/chrissimpkins/codeface
(Monospace) Programmation fonts Programmation fonts
http://s9w.github.io/font_compare/ http://s9w.github.io/font_compare/
(Monospace) Proggy Programming Fonts Inconsolata
http://upperbounds.net
(Monospace) Inconsolata
http://www.levien.com/type/myfonts/inconsolata.html http://www.levien.com/type/myfonts/inconsolata.html
(Monospace) Adobe Source Code Pro: Monospaced font family for user interface and coding environments Adobe Source Code Pro: Monospaced font family for user interface and coding environments
https://github.com/adobe-fonts/source-code-pro https://github.com/adobe-fonts/source-code-pro
(Monospace) Monospace/Fixed Width Programmer's Fonts Monospace/Fixed Width Programmer's Fonts
http://www.lowing.org/fonts/ 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). Or use Arial Unicode or other Unicode fonts provided with Windows for full characters coverage (not sure of their licensing).