blob: 727f5964050b5623f1c48e4380c4af169657bddd (
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
44
45
46
47
|
<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
which limits 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>
|
