フォント変化のないHTML5になってもうだいぶ長いですが、結合文字を使った場合にフォントが変化することがあるのが話題になりました。

一部の文字だけをdefontにするバグだけど
下への斜面が綺麗に作れるので互換性さえ良ければ採用したい．#コメントアート pic.twitter.com/FDLHulKlZI

— AN.@けもフレ用垢 (@L_KemonoFriends) September 18, 2021

自分でも軽く調べたのでまとめておきます。

• 発生するかどうかは環境次第？
  • PC(win10)のChromeでは発生した
  • PC(win10)のFirefoxでは発生しなかった
• 「結合した文字」1文字単位でフォント変化が起こる
  • 複数文字に影響はしない
  • 「結合した文字」の全ての文字をカバーするフォントがある場合、そのフォントが優先的に使われる

• mincho/gothic時にArial化を起こす文字
  • U+0310,U+0610 等
• mincho/gothic時にMSPゴシック化を起こす文字
  • U+0485,U+0486
• defont時にMSPゴシック化を起こす文字
  • U+3099,U+309A

https://triple-underscore.github.io/css-fonts-ja.html#cluster-matching
どうやら
「結合文字等がある場合、その結合した文字のそれぞれの文字を収録したフォントが優先的に使われる」というルールがあるようです。

（ただFirefoxでは起きなかったので、実際はまちまちなようです。）

このため、「変化元のフォントに収録されていなくて、変化先のフォントに収録されている」ような結合文字があるとフォント変化が起こせるようです。

Unicodeのどの文字が結合文字か、のデータは以下にあります。
https://www.unicode.org/reports/tr44/#General_Category_Values
https://www.unicode.org/Public/UCD/latest/ucd/UnicodeData.txt

また、フォント毎の収録文字はBabelMapでリストできます。
https://www.babelstone.co.uk/Software/BabelMap.html

これらの情報から「変化元のフォントに収録されていなくて、変化先のフォントに収録されている」ような結合文字をリストします。

なお、候補のフォントはwindows10環境で指定されている

のみを想定して調べました。

（通常は、指定の先頭の方が優先的に使われます。）
（結合文字がある場合、その結合した文字のパーツ全てが収録されてるフォントがあれば、この後ろの方でも呼ばれる、というのが今回の現象です。）
（游明朝と游ゴシックの結合文字の収録は同様のようなので、省略します。）

defont時にMSPゴシック化を起こす文字

Arialに収録されておらず、MSPゴシックに収録されてる結合文字がそうなると予想できます。

U+3099 ゙ COMBINING KATAKANA-HIRAGANA VOICED SOUND MARK U+309A ゚ COMBINING KATAKANA-HIRAGANA SEMI-VOICED SOUND MARK

どうやら2つのみです。

実際に行うとこういう風になります。

上はU+2580ですが面積が違うのが分かると思います。下はAですがちょっと太さが違います。

mincho/gothic時にArial化を起こす文字

游明朝に収録されておらず、Arialに収録されてる結合文字がそうなると予想できます。

U+0309 ̉ COMBINING HOOK ABOVE U+030D ̍ COMBINING VERTICAL LINE ABOVE U+030E ̎ COMBINING DOUBLE VERTICAL LINE ABOVE U+0310 ̐ COMBINING CANDRABINDU U+0311 ̑ COMBINING INVERTED BREVE U+0312 ̒ COMBINING TURNED COMMA ABOVE U+0313 ̓ COMBINING COMMA ABOVE U+0314 ̔ COMBINING REVERSED COMMA ABOVE U+0315 ̕ COMBINING COMMA ABOVE RIGHT U+0316 ̖ COMBINING GRAVE ACCENT BELOW U+0317 ̗ COMBINING ACUTE ACCENT BELOW U+031B ̛ COMBINING HORN U+0321 ̡ COMBINING PALATALIZED HOOK BELOW U+0322 ̢ COMBINING RETROFLEX HOOK BELOW U+0323 ̣ COMBINING DOT BELOW U+0326 ̦ COMBINING COMMA BELOW U+032B ̫ COMBINING INVERTED DOUBLE ARCH BELOW U+032D ̭ COMBINING CIRCUMFLEX ACCENT BELOW U+032E ̮ COMBINING BREVE BELOW U+0331 ̱ COMBINING MACRON BELOW U+0333 ̳ COMBINING DOUBLE LOW LINE U+0335 ̵ COMBINING SHORT STROKE OVERLAY U+0337 ̷ COMBINING SHORT SOLIDUS OVERLAY U+0338 ̸ COMBINING LONG SOLIDUS OVERLAY U+033E ̾ COMBINING VERTICAL TILDE U+033F ̿ COMBINING DOUBLE OVERLINE U+0340 ̀ COMBINING GRAVE TONE MARK U+0341 ́ COMBINING ACUTE TONE MARK U+0342 ͂ COMBINING GREEK PERISPOMENI U+0343 ̓ COMBINING GREEK KORONIS U+0344 ̈́ COMBINING GREEK DIALYTIKA TONOS U+0345 ͅ COMBINING GREEK YPOGEGRAMMENI U+0346 ͆ COMBINING BRIDGE ABOVE U+0347 ͇ COMBINING EQUALS SIGN BELOW U+0348 ͈ COMBINING DOUBLE VERTICAL LINE BELOW U+0349 ͉ COMBINING LEFT ANGLE BELOW U+034A ͊ COMBINING NOT TILDE ABOVE U+034B ͋ COMBINING HOMOTHETIC ABOVE U+034C ͌ COMBINING ALMOST EQUAL TO ABOVE U+034D ͍ COMBINING LEFT RIGHT ARROW BELOW U+034E ͎ COMBINING UPWARDS ARROW BELOW U+034F ͏ COMBINING GRAPHEME JOINER U+0350 ͐ COMBINING RIGHT ARROWHEAD ABOVE U+0351 ͑ COMBINING LEFT HALF RING ABOVE U+0352 ͒ COMBINING FERMATA U+0353 ͓ COMBINING X BELOW U+0354 ͔ COMBINING LEFT ARROWHEAD BELOW U+0355 ͕ COMBINING RIGHT ARROWHEAD BELOW U+0356 ͖ COMBINING RIGHT ARROWHEAD AND UP ARROWHEAD BELOW U+0357 ͗ COMBINING RIGHT HALF RING ABOVE U+0358 ͘ COMBINING DOT ABOVE RIGHT U+0359 ͙ COMBINING ASTERISK BELOW U+035A ͚ COMBINING DOUBLE RING BELOW U+035B ͛ COMBINING ZIGZAG ABOVE U+035C ͜ COMBINING DOUBLE BREVE BELOW U+035D ͝ COMBINING DOUBLE BREVE U+035E ͞ COMBINING DOUBLE MACRON U+035F ͟ COMBINING DOUBLE MACRON BELOW U+0360 ͠ COMBINING DOUBLE TILDE U+0362 ͢ COMBINING DOUBLE RIGHTWARDS ARROW BELOW U+0363 ͣ COMBINING LATIN SMALL LETTER A U+0364 ͤ COMBINING LATIN SMALL LETTER E U+0365 ͥ COMBINING LATIN SMALL LETTER I U+0366 ͦ COMBINING LATIN SMALL LETTER O U+0367 ͧ COMBINING LATIN SMALL LETTER U U+0368 ͨ COMBINING LATIN SMALL LETTER C U+0369 ͩ COMBINING LATIN SMALL LETTER D U+036A ͪ COMBINING LATIN SMALL LETTER H U+036B ͫ COMBINING LATIN SMALL LETTER M U+036C ͬ COMBINING LATIN SMALL LETTER R U+036D ͭ COMBINING LATIN SMALL LETTER T U+036E ͮ COMBINING LATIN SMALL LETTER V U+036F ͯ COMBINING LATIN SMALL LETTER X U+0483 ҃ COMBINING CYRILLIC TITLO U+0484 ҄ COMBINING CYRILLIC PALATALIZATION U+0485 ҅ COMBINING CYRILLIC DASIA PNEUMATA U+0486 ҆ COMBINING CYRILLIC PSILI PNEUMATA U+0487 ҇ COMBINING CYRILLIC POKRYTIE U+0591 ֑ HEBREW ACCENT ETNAHTA U+0592 ֒ HEBREW ACCENT SEGOL U+0593 ֓ HEBREW ACCENT SHALSHELET U+0594 ֔ HEBREW ACCENT ZAQEF QATAN U+0595 ֕ HEBREW ACCENT ZAQEF GADOL U+0596 ֖ HEBREW ACCENT TIPEHA U+0597 ֗ HEBREW ACCENT REVIA U+0598 ֘ HEBREW ACCENT ZARQA U+0599 ֙ HEBREW ACCENT PASHTA U+059A ֚ HEBREW ACCENT YETIV U+059B ֛ HEBREW ACCENT TEVIR U+059C ֜ HEBREW ACCENT GERESH U+059D ֝ HEBREW ACCENT GERESH MUQDAM U+059E ֞ HEBREW ACCENT GERSHAYIM U+059F ֟ HEBREW ACCENT QARNEY PARA U+05A0 ֠ HEBREW ACCENT TELISHA GEDOLA U+05A1 ֡ HEBREW ACCENT PAZER U+05A2 ֢ HEBREW ACCENT ATNAH HAFUKH U+05A3 ֣ HEBREW ACCENT MUNAH U+05A4 ֤ HEBREW ACCENT MAHAPAKH U+05A5 ֥ HEBREW ACCENT MERKHA U+05A6 ֦ HEBREW ACCENT MERKHA KEFULA U+05A7 ֧ HEBREW ACCENT DARGA U+05A8 ֨ HEBREW ACCENT QADMA U+05A9 ֩ HEBREW ACCENT TELISHA QETANA U+05AA ֪ HEBREW ACCENT YERAH BEN YOMO U+05AB ֫ HEBREW ACCENT OLE U+05AC ֬ HEBREW ACCENT ILUY U+05AD ֭ HEBREW ACCENT DEHI U+05AE ֮ HEBREW ACCENT ZINOR U+05AF ֯ HEBREW MARK MASORA CIRCLE U+05B0 ְ HEBREW POINT SHEVA U+05B1 ֱ HEBREW POINT HATAF SEGOL U+05B2 ֲ HEBREW POINT HATAF PATAH U+05B3 ֳ HEBREW POINT HATAF QAMATS U+05B4 ִ HEBREW POINT HIRIQ U+05B5 ֵ HEBREW POINT TSERE U+05B6 ֶ HEBREW POINT SEGOL U+05B7 ַ HEBREW POINT PATAH U+05B8 ָ HEBREW POINT QAMATS U+05B9 ֹ HEBREW POINT HOLAM U+05BA ֺ HEBREW POINT HOLAM HASER FOR VAV U+05BB ֻ HEBREW POINT QUBUTS U+05BC ּ HEBREW POINT DAGESH OR MAPIQ U+05BD ֽ HEBREW POINT METEG U+05BF ֿ HEBREW POINT RAFE U+05C1 ׁ HEBREW POINT SHIN DOT U+05C2 ׂ HEBREW POINT SIN DOT U+05C4 ׄ HEBREW MARK UPPER DOT U+05C5 ׅ HEBREW MARK LOWER DOT U+05C7 ׇ HEBREW POINT QAMATS QATAN U+0610 ؐ ARABIC SIGN SALLALLAHOU ALAYHE WASSALLAM U+0611 ؑ ARABIC SIGN ALAYHE ASSALLAM U+0612 ؒ ARABIC SIGN RAHMATULLAH ALAYHE U+0613 ؓ ARABIC SIGN RADI ALLAHOU ANHU U+0614 ؔ ARABIC SIGN TAKHALLUS U+0615 ؕ ARABIC SMALL HIGH TAH U+0616 ؖ ARABIC SMALL HIGH LIGATURE ALEF WITH LAM WITH YEH U+0617 ؗ ARABIC SMALL HIGH ZAIN U+0618 ؘ ARABIC SMALL FATHA U+0619 ؙ ARABIC SMALL DAMMA U+061A ؚ ARABIC SMALL KASRA U+064B ً ARABIC FATHATAN U+064C ٌ ARABIC DAMMATAN U+064D ٍ ARABIC KASRATAN U+064E َ ARABIC FATHA U+064F ُ ARABIC DAMMA U+0650 ِ ARABIC KASRA U+0651 ّ ARABIC SHADDA U+0652 ْ ARABIC SUKUN U+0653 ٓ ARABIC MADDAH ABOVE U+0654 ٔ ARABIC HAMZA ABOVE U+0655 ٕ ARABIC HAMZA BELOW U+0656 ٖ ARABIC SUBSCRIPT ALEF U+0657 ٗ ARABIC INVERTED DAMMA U+0658 ٘ ARABIC MARK NOON GHUNNA U+0659 ٙ ARABIC ZWARAKAY U+065A ٚ ARABIC VOWEL SIGN SMALL V ABOVE U+065B ٛ ARABIC VOWEL SIGN INVERTED SMALL V ABOVE U+065C ٜ ARABIC VOWEL SIGN DOT BELOW U+065D ٝ ARABIC REVERSED DAMMA U+065E ٞ ARABIC FATHA WITH TWO DOTS U+065F ٟ ARABIC WAVY HAMZA BELOW U+0670 ٰ ARABIC LETTER SUPERSCRIPT ALEF U+06D6 ۖ ARABIC SMALL HIGH LIGATURE SAD WITH LAM WITH ALEF MAKSURA U+06D7 ۗ ARABIC SMALL HIGH LIGATURE QAF WITH LAM WITH ALEF MAKSURA U+06D8 ۘ ARABIC SMALL HIGH MEEM INITIAL FORM U+06D9 ۙ ARABIC SMALL HIGH LAM ALEF U+06DA ۚ ARABIC SMALL HIGH JEEM U+06DB ۛ ARABIC SMALL HIGH THREE DOTS U+06DC ۜ ARABIC SMALL HIGH SEEN U+06DF ۟ ARABIC SMALL HIGH ROUNDED ZERO U+06E0 ۠ ARABIC SMALL HIGH UPRIGHT RECTANGULAR ZERO U+06E1 ۡ ARABIC SMALL HIGH DOTLESS HEAD OF KHAH U+06E2 ۢ ARABIC SMALL HIGH MEEM ISOLATED FORM U+06E3 ۣ ARABIC SMALL LOW SEEN U+06E4 ۤ ARABIC SMALL HIGH MADDA U+06E7 ۧ ARABIC SMALL HIGH YEH U+06E8 ۨ ARABIC SMALL HIGH NOON U+06EA ۪ ARABIC EMPTY CENTRE LOW STOP U+06EB ۫ ARABIC EMPTY CENTRE HIGH STOP U+06EC ۬ ARABIC ROUNDED HIGH STOP WITH FILLED CENTRE U+06ED ۭ ARABIC SMALL LOW MEEM U+08D4 ࣔ ARABIC SMALL HIGH WORD AR-RUB U+08D5 ࣕ ARABIC SMALL HIGH SAD U+08D6 ࣖ ARABIC SMALL HIGH AIN U+08D7 ࣗ ARABIC SMALL HIGH QAF U+08D8 ࣘ ARABIC SMALL HIGH NOON WITH KASRA U+08D9 ࣙ ARABIC SMALL LOW NOON WITH KASRA U+08DA ࣚ ARABIC SMALL HIGH WORD ATH-THALATHA U+08DB ࣛ ARABIC SMALL HIGH WORD AS-SAJDA U+08DC ࣜ ARABIC SMALL HIGH WORD AN-NISF U+08DD ࣝ ARABIC SMALL HIGH WORD SAKTA U+08DE ࣞ ARABIC SMALL HIGH WORD QIF U+08DF ࣟ ARABIC SMALL HIGH WORD WAQFA U+08E0 ࣠ ARABIC SMALL HIGH FOOTNOTE MARKER U+08E1 ࣡ ARABIC SMALL HIGH SIGN SAFHA U+08E3 ࣣ ARABIC TURNED DAMMA BELOW U+08E4 ࣤ ARABIC CURLY FATHA U+08E5 ࣥ ARABIC CURLY DAMMA U+08E6 ࣦ ARABIC CURLY KASRA U+08E7 ࣧ ARABIC CURLY FATHATAN U+08E8 ࣨ ARABIC CURLY DAMMATAN U+08E9 ࣩ ARABIC CURLY KASRATAN U+08EA ࣪ ARABIC TONE ONE DOT ABOVE U+08EB ࣫ ARABIC TONE TWO DOTS ABOVE U+08EC ࣬ ARABIC TONE LOOP ABOVE U+08ED ࣭ ARABIC TONE ONE DOT BELOW U+08EE ࣮ ARABIC TONE TWO DOTS BELOW U+08EF ࣯ ARABIC TONE LOOP BELOW U+08F0 ࣰ ARABIC OPEN FATHATAN U+08F1 ࣱ ARABIC OPEN DAMMATAN U+08F2 ࣲ ARABIC OPEN KASRATAN U+08F3 ࣳ ARABIC SMALL HIGH WAW U+08F4 ࣴ ARABIC FATHA WITH RING U+08F5 ࣵ ARABIC FATHA WITH DOT ABOVE U+08F6 ࣶ ARABIC KASRA WITH DOT BELOW U+08F7 ࣷ ARABIC LEFT ARROWHEAD ABOVE U+08F8 ࣸ ARABIC RIGHT ARROWHEAD ABOVE U+08F9 ࣹ ARABIC LEFT ARROWHEAD BELOW U+08FA ࣺ ARABIC RIGHT ARROWHEAD BELOW U+08FB ࣻ ARABIC DOUBLE RIGHT ARROWHEAD ABOVE U+08FC ࣼ ARABIC DOUBLE RIGHT ARROWHEAD ABOVE WITH DOT U+08FD ࣽ ARABIC RIGHT ARROWHEAD ABOVE WITH DOT U+08FE ࣾ ARABIC DAMMA WITH DOT U+08FF ࣿ ARABIC MARK SIDEWAYS NOON GHUNNA U+1DC0 ᷀ COMBINING DOTTED GRAVE ACCENT U+1DC1 ᷁ COMBINING DOTTED ACUTE ACCENT U+1DC2 ᷂ COMBINING SNAKE BELOW U+1DC3 ᷃ COMBINING SUSPENSION MARK U+1DC4 ᷄ COMBINING MACRON-ACUTE U+1DC5 ᷅ COMBINING GRAVE-MACRON U+1DC6 ᷆ COMBINING MACRON-GRAVE U+1DC7 ᷇ COMBINING ACUTE-MACRON U+1DC8 ᷈ COMBINING GRAVE-ACUTE-GRAVE U+1DC9 ᷉ COMBINING ACUTE-GRAVE-ACUTE U+1DCA ᷊ COMBINING LATIN SMALL LETTER R BELOW U+1DFE ᷾ COMBINING LEFT ARROWHEAD ABOVE U+1DFF ᷿ COMBINING RIGHT ARROWHEAD AND DOWN ARROWHEAD BELOW U+20F0 ⃰ COMBINING ASTERISK ABOVE U+FB1E ﬞ HEBREW POINT JUDEO-SPANISH VARIKA U+FE20 ︠ COMBINING LIGATURE LEFT HALF U+FE21 ︡ COMBINING LIGATURE RIGHT HALF U+FE22 ︢ COMBINING DOUBLE TILDE LEFT HALF U+FE23 ︣ COMBINING DOUBLE TILDE RIGHT HALF

以上243文字あるようです。

全てが起こすかは不明です。とりあえずU+0310,U+08FD,U+20F0,U+FE20を確認したところ変化するようです。
U+2588と結合させた様子です。

mincho/gothic時にMSPゴシック化を起こす文字

游明朝に収録されておらず、MSPゴシックに収録されてる結合文字がそうなると予想できます。

U+0483 ҃ COMBINING CYRILLIC TITLO U+0484 ҄ COMBINING CYRILLIC PALATALIZATION U+0485 ҅ COMBINING CYRILLIC DASIA PNEUMATA U+0486 ҆ COMBINING CYRILLIC PSILI PNEUMATA

以上4つです。

こちらは全てがフォント変化を起こすわけではないようです。
実際に確認したところU+0483,U+0484はフォント変化を起こさず、U+0485,U+0486だけがフォント変化を起こすようです。

なお、これらはArial化を起こす文字でもあるので、Arialに収録されている文字にくっつけるとArial化します。

Arialに収録されておらず、MSPゴシックに収録されてる文字にくっつけないとMSPゴシック化しません。