blob: dc39a9caff49c497681ca9851b8a48153ebf9ef3 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<p>While working on my custom <a href="https://apps.ankiweb.net/" target="_blank">Anki</a> cards for learning Japanese
and Turkish, I
found that my font of choice for Japanese <a
href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" target="_blank">IPAex</a> was not
properly supporting glyphs used by
Turkish, like <a href="https://en.wikipedia.org/wiki/%C4%9E" target="_blank">ğ</a>.</p>
<figure>
<img src="/media/content/unicode-range/before.jpg" alt="before">
<figcaption aria-hidden="true">before</figcaption>
</figure>
<p>To fix this i am using a property of the <code>@font-face</code> rule
to limit custom fonts to source their glyphs from a subset of the
unicode range and force fallback to the next font in the set.</p>
<pre>
<code>@font-face {
font-family: "IPAexGothic";
src:
local("IPAexGothic"),
url("_ipaexg.ttf");
unicode-range:
U+0020-007F,
U+3000-303f,
U+3040-309f,
U+30a0-30ff,
U+ff00-ffef,
U+4e00-9faf;
}
.card {
font-family:
IPAexGothic,
Noto Sans,
sans;
}</code>
</pre>
<figure>
<img src="/media/content/unicode-range/after.jpg" alt="after">
<figcaption aria-hidden="true">after</figcaption>
</figure>
|
