From 57a0b5367a535087531894155b222355ca396e2f Mon Sep 17 00:00:00 2001 From: Robert Günzler Date: Fri, 7 Mar 2025 01:34:05 +0100 Subject: % update site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Robert Günzler --- src/inc/index.htm | 1 + src/inc/notes.htm | 1 + src/inc/notes.md | 1 + src/inc/unicode-range.htm | 32 ++++++++++++++++++++++++++++++++ src/inc/unicode-range.md | 35 +++++++++++++++++++++++++++++++++++ 5 files changed, 70 insertions(+) create mode 100644 src/inc/unicode-range.htm create mode 100644 src/inc/unicode-range.md (limited to 'src') diff --git a/src/inc/index.htm b/src/inc/index.htm index b94b802..7318c4e 100644 --- a/src/inc/index.htm +++ b/src/inc/index.htm @@ -18,5 +18,6 @@
  • shikoku
  • sony-wf1000xm3-battery
  • toyama
    • +
  • unicode-range
  • yamanashi
    • diff --git a/src/inc/notes.htm b/src/inc/notes.htm index 98f0d44..6c7279c 100644 --- a/src/inc/notes.htm +++ b/src/inc/notes.htm @@ -3,4 +3,5 @@
  • 2025-01-08: {pyonji}
  • 2025-01-10: {sony-wf1000xm3-battery}
  • 2025-01-24: {plan9-cursors}
    • +
  • 2025-03-07: {unicode-range}
    • diff --git a/src/inc/notes.md b/src/inc/notes.md index 011a7c8..76e88d9 100644 --- a/src/inc/notes.md +++ b/src/inc/notes.md @@ -2,4 +2,5 @@ * `2025-01-08`: {pyonji} * `2025-01-10`: {sony-wf1000xm3-battery} * `2025-01-24`: {plan9-cursors} +* `2025-03-07`: {unicode-range} diff --git a/src/inc/unicode-range.htm b/src/inc/unicode-range.htm new file mode 100644 index 0000000..778cb7c --- /dev/null +++ b/src/inc/unicode-range.htm @@ -0,0 +1,32 @@ + +

    While working on my custom Anki cards for learning Japanese and Turkish, I +found that my font of choice for Japanese IPAex was not properly supporting glyphs used by +Turkish, like ğ.

    +

    To fix this i am using a property of the @font-face 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.

    +
    @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;
+}
    diff --git a/src/inc/unicode-range.md b/src/inc/unicode-range.md new file mode 100644 index 0000000..8c68636 --- /dev/null +++ b/src/inc/unicode-range.md @@ -0,0 +1,35 @@ + +While working on my custom [Anki] cards for learning Japanese and Turkish, I +found that my font of choice for Japanese [IPAex] was not properly supporting +glyphs used by Turkish, like [ğ]. + +To fix this i am using a property of the `@font-face` 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. + +```css +@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; +} +``` + +[Anki]: https://apps.ankiweb.net/ +[IPAex]: https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88 +[ğ]: https://en.wikipedia.org/wiki/%C4%9E -- cgit 1.4.1