App:Library:LVGL:docs:Overview:Fonts
https://docs.lvgl.io/8.2/overview/font.html
Fonts
| 英文 | 自動翻訳 |
|---|---|
|
In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph). A font is stored in a For example: lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/
Fonts have a bpp (bits per pixel) property. It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity. This way, with higher bpp, the edges of the letter can be smoother.
The bpp property also affects the amount of memory needed to store a font. For example, bpp = 4 makes a font nearly four times larger compared to bpp = 1. |
LVGLでは、フォントは個々の文字（グリフ）の画像を描画するために必要なビットマップやその他の情報の集合体です。
フォントは、 lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/
フォントには、bpp（bits per pixel）プロパティがあります。 これは、フォント内のピクセルを記述するために、何ビットが使用されるかを示しています。ピクセルに格納されている値によって、そのピクセルの不透明度が決まります。 このように、bppを高くすると、文字のエッジをより滑らかにすることができます。 使用可能なbpp値は、1、2、4、8です（値が高いほど品質が高いことを意味します）。 bppプロパティは、フォントを保存するために必要なメモリ量にも影響します。 たとえば、bpp = 4は、bpp = 1に比べて、フォントのサイズが約4倍になります。 |
Unicode support
| 英文 | 自動翻訳 |
|---|---|
|
LVGL supports UTF-8 encoded Unicode characters. Your editor needs to be configured to save your code/text as UTF-8 (usually this the default) and be sure that, To test it try lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label1, LV_SYMBOL_OK);
If all works well, a ✓ character should be displayed. |
LVGLはUTF-8でエンコードされたユニコード文字をサポートしています。
また、 lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label1, LV_SYMBOL_OK);
うまくいけば、✓が表示されるはずです。 |
Built-in fonts
| 英文 | 自動翻訳 |
|---|---|
|
There are several built-in fonts in different sizes, which can be enabled in |
サイズの異なるいくつかの組み込みフォントがあり、lv_conf.h の LV_FONT_... の定義で有効にすることができます。
|
Normal fonts
| 英文 | 自動翻訳 |
|---|---|
|
Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).
|
すべての ASCII 文字，学位記号（U+00B0），ビュレット記号（U+2022）および組み込み記号（下記参照）を 含む。
|
Special fonts
| 英文 | 自動翻訳 |
|---|---|
To use them in a style, just add a pointer to a font variable like shown above. The built-in fonts with bpp = 4 contain the ASCII characters and use the Montserrat font. In addition to the ASCII range, the following symbols are also added to the built-in fonts from the FontAwesome font. The symbols can be used singly as: lv_label_set_text(my_label, LV_SYMBOL_OK);
Or with together with strings (compile time string concatenation): lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
Or more symbols together: lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
|
組み込みフォントはグローバル変数で、高さ16pxのフォントは スタイルでこれらを使用するには、上記のようにフォント変数へのポインタを追加するだけです。 bpp = 4 の組み込みフォントは ASCII 文字を含み、Montserrat フォントを使用します。 ASCIIの範囲に加えて、FontAwesomeフォントから以下の記号がビルトインフォントに追加されています。 これらの記号は、単独で次のように使用することができます。 lv_label_set_text(my_label, LV_SYMBOL_OK);
または、文字列と一緒にwith（コンパイル時の文字列連結）。 lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
あるいはもっと多くのシンボルを一緒に。 lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
|
Special features
Bidirectional support
| 英文 | 自動翻訳 |
|---|---|
|
Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction.
Some examples: BiDi support is enabled by
It's a general property which can be set for every object. If not set then it will be inherited from the parent. This means it's enough to set the base direction of a screen and every object will inherit it. The default base direction for screens can be set by To set an object's base direction use
|
多くの言語は左から右へ（LTR）書く方向ですが、いくつかの言語（ヘブライ語、ペルシャ語、アラビア語など）は右から左へ（RTL）書く方向を使用します。
LVGLは、RTLテキストだけでなく、混合テキスト（bidirectional, BiDi）のレンダリングもサポートします。 いくつかの例を挙げます。 BiDiのサポートは、lv_conf.hの
これは一般的なプロパティであり、すべてのオブジェクトに設定することができます。 もし設定されていなければ、それは親から継承されます。 つまり、画面の基本方向を設定するだけで、すべてのオブジェクトにそれが継承されるのです。
オブジェクトのベース方向を設定するには、
|
Arabic and Persian support
| 英文 | 自動翻訳 |
|---|---|
|
There are some special rules to display Arabic and Persian characters: the form of a character depends on its position in the text. A different form of the same letter needs to be used if is isolated, at start, middle or end positions. Besides these, some conjunction rules should also be taken into account. LVGL supports these rules if However, there some limitations:
|
アラビア語やペルシャ語の文字を表示するには、いくつかの特別なルールがあります。
同じ文字でも、開始位置、中間位置、終了位置で孤立している場合は、別の形式を使用する必要があります。 これらに加えて、いくつかの接続規則も考慮する必要があります。 LVGLは しかし、いくつかの制限があります。
|
Subpixel rendering
| 英文 | 自動翻訳 |
|---|---|
|
Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more here. For subpixel rendering, the fonts need to be generated with special settings:
That is the R, G, B channels are next each other and not above each other.
The order of color channels also needs to match with the library settings. By default, LVGL assumes |
サブピクセルレンダリングは、アンチエイリアスのかかったエッジをピクセルレベルの粒度ではなく、赤、緑、青のチャンネルでレンダリングすることにより、水平方向の解像度を3倍にすることができます。
これは、各ピクセルの物理的なカラーチャンネルの位置を利用し、より高品質の文字アンチエイリアスを実現します。 詳しくはこちらをご覧ください。 サブピクセルレンダリングでは、フォントを特別な設定で生成する必要があります。
つまり、R、G、Bの各チャンネルが隣り合っていて、互いの上にない状態です。
デフォルトでは、LVGLは |
Compressed fonts
| 英文 | 自動翻訳 |
|---|---|
|
The bitmaps of fonts can be compressed by
However, it's about 30% slower to render compressed fonts.
|
フォントのビットマップは、次の方法で圧縮することができます。
ただし、圧縮されたフォントのレンダリングは約30%遅くなります。
|
Add a new font
| 英文 | 自動翻訳 |
|---|---|
|
There are several ways to add a new font to your project:
To make fonts globally available (like the builtin fonts), add them to |
プロジェクトに新しいフォントを追加するには、いくつかの方法があります。
フォントをグローバルに利用できるようにするには（組み込みフォントのように）、lv_conf.h の |
Add new symbols
| 英文 | 自動翻訳 |
|---|---|
|
The built-in symbols are created from the FontAwesome font.
|
内蔵のシンボルは、FontAwesomeフォントから作成されています。
|
Load a font at run-time
| 英文 | 自動翻訳 |
|---|---|
|
The font needs to have a special binary format. (Not TTF or WOFF). Use lv_font_conv with the Note that to load a font LVGL's filesystem needs to be enabled and a driver must be added. Example lv_font_t * my_font;
my_font = lv_font_load(X/path/to/my_font.bin);
/*Use the font*/
/*Free the font if not required anymore*/
lv_font_free(my_font);
|
lv_font_loadは、ファイルからフォントを読み込むために使用できます。
フォントは、特別なバイナリ形式である必要があります。(TTFやWOFFではありません)。 LVGL互換のフォントファイルを生成するには、 lv_font_conv に フォントをロードするには、LVGLのファイルシステムを有効にし、ドライバを追加する必要があることに注意してください。 使用例 lv_font_t * my_font;
my_font = lv_font_load(X/path/to/my_font.bin);
/*Use the font*/
/*Free the font if not required anymore*/
lv_font_free(my_font);
|
Add a new font engine
| 英文 | 自動翻訳 |
|---|---|
|
LVGL's font interface is designed to be very flexible but, even so, you can add your own font engine in place of LVGL's internal one. For example, you can use FreeType to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them. A ready to use FreeType can be found in lv_freetype repository. To do this, a custom /*Describe the properties of a font*/
lv_font_t my_font;
my_font.get_glyph_dsc = my_get_glyph_dsc_cb; /*Set a callback to get info about gylphs*/
my_font.get_glyph_bitmap = my_get_glyph_bitmap_cb; /*Set a callback to get bitmap of a glyp*/
my_font.line_height = height; /*The real line height where any text fits*/
my_font.base_line = base_line; /*Base line measured from the top of line_height*/
my_font.dsc = something_required; /*Store any implementation specific data here*/
my_font.user_data = user_data; /*Optionally some extra user data*/
...
/* Get info about glyph of `unicode_letter` in `font` font.
* Store the result in `dsc_out`.
* The next letter (`unicode_letter_next`) might be used to calculate the width required by this glyph (kerning)
*/
bool my_get_glyph_dsc_cb(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next)
{
/*Your code here*/
/* Store the result.
* For example ...
*/
dsc_out->adv_w = 12; /*Horizontal space required by the glyph in [px]*/
dsc_out->box_h = 8; /*Height of the bitmap in [px]*/
dsc_out->box_w = 6; /*Width of the bitmap in [px]*/
dsc_out->ofs_x = 0; /*X offset of the bitmap in [pf]*/
dsc_out->ofs_y = 3; /*Y offset of the bitmap measured from the as line*/
dsc_out->bpp = 2; /*Bits per pixel: 1/2/4/8*/
return true; /*true: glyph found; false: glyph was not found*/
}
/* Get the bitmap of `unicode_letter` from `font`. */
const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_letter)
{
/* Your code here */
/* The bitmap should be a continuous bitstream where
* each pixel is represented by `bpp` bits */
return bitmap; /*Or NULL if not found*/
|
LVGLのフォント・インターフェースは非常に柔軟に設計されていますが、それでも、LVGLの内部エンジンの代わりに、独自のフォント・エンジンを追加することができます。
たとえば、FreeTypeを使ってTTFフォントからグリフをリアルタイムにレンダリングしたり、外部フラッシュを使ってフォントのビットマップを保存し、ライブラリが必要とするときにそれを読み込むことができます。 すぐに使える FreeType は lv_freetype リポジトリで見つけることができます。 これを行うには、カスタム /*Describe the properties of a font*/
lv_font_t my_font;
my_font.get_glyph_dsc = my_get_glyph_dsc_cb; /*Set a callback to get info about gylphs*/
my_font.get_glyph_bitmap = my_get_glyph_bitmap_cb; /*Set a callback to get bitmap of a glyp*/
my_font.line_height = height; /*The real line height where any text fits*/
my_font.base_line = base_line; /*Base line measured from the top of line_height*/
my_font.dsc = something_required; /*Store any implementation specific data here*/
my_font.user_data = user_data; /*Optionally some extra user data*/
...
/* Get info about glyph of `unicode_letter` in `font` font.
* Store the result in `dsc_out`.
* The next letter (`unicode_letter_next`) might be used to calculate the width required by this glyph (kerning)
*/
bool my_get_glyph_dsc_cb(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next)
{
/*Your code here*/
/* Store the result.
* For example ...
*/
dsc_out->adv_w = 12; /*Horizontal space required by the glyph in [px]*/
dsc_out->box_h = 8; /*Height of the bitmap in [px]*/
dsc_out->box_w = 6; /*Width of the bitmap in [px]*/
dsc_out->ofs_x = 0; /*X offset of the bitmap in [pf]*/
dsc_out->ofs_y = 3; /*Y offset of the bitmap measured from the as line*/
dsc_out->bpp = 2; /*Bits per pixel: 1/2/4/8*/
return true; /*true: glyph found; false: glyph was not found*/
}
/* Get the bitmap of `unicode_letter` from `font`. */
const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_letter)
{
/* Your code here */
/* The bitmap should be a continuous bitstream where
* each pixel is represented by `bpp` bits */
return bitmap; /*Or NULL if not found*/
|
Use font fallback
| 英文 | 自動翻訳 |
|---|---|
|
You can specify When the font fails to find glyph to a letter, it will try to let font from
/* Roboto font doesn't have support for CJK glyphs */
lv_font_t *roboto = my_font_load_function();
/* Droid Sans Fallback has more glyphs but its typeface doesn't look good as Roboto */
lv_font_t *droid_sans_fallback = my_font_load_function();
/* So now we can display Roboto for supported characters while having wider characters set support */
roboto->fallback = droid_sans_fallback;
|
lv_font_t で fallbackを指定すると、フォントにフォールバックを提供することができます。
フォントが文字に対するグリフを見つけられなかったとき、fallbackからフォントに処理をさせようとします。 fallbackcan be chained, so it will try to solve until there is no fallbackset. /* Roboto font doesn't have support for CJK glyphs */
lv_font_t *roboto = my_font_load_function();
/* Droid Sans Fallback has more glyphs but its typeface doesn't look good as Roboto */
lv_font_t *droid_sans_fallback = my_font_load_function();
/* So now we can display Roboto for supported characters while having wider characters set support */
roboto->fallback = droid_sans_fallback;
|
