

環境  
OS: OSX El Capitan 10.11.6  
Safari: 9.1.2 11601.7.7  
Chrome: 55.0.2883.95 64-bit  
<https://codepen.io/technuma/pen/BpBRjZ>

[code]

    <h1>ᙏ̤̫ rabbit ᙏ̤̫</h1>
[/code]

文字コード: UTF-8  
表示したい文字: ᙏ̤̫  
上のcodepenをMac

・ safari で開く場合  
正常に見える  
![画像の説明をここに入力](https://i.stack.imgur.com/5u2gg.png)

・ chrome で開く場合  
文字化けする  
![画像の説明をここに入力](https://i.stack.imgur.com/2tSIJ.png)

という状態です。

どうしたら解消できますでしょうか。


CC BY-SA 4.0
2016-12-31T21:56:48.657
31558
2019-12-13T19:38:15.393
2019-12-13T19:38:15.393
32986
7641
question
html google-chrome safari font
「ᙏ̤̫」という合成文字がうさぎの顔に見えるように表示したい


何語の文字なのでしょうか？ `Noto Sans Japanese`、`Hiragino Kaku Gothic Pro`、`Meiryo`、`MS
PGothic`等のフォントが指定されていますが日本語の文字ではないはずです。日本語で質問するよりも適切な言語で質問すべきです。  
文字を不適切に図形のように扱うのであれば、それが意図通りに表示されないことは **文字化け** ではなく **力不足** ということになります。

最近では[Webフォントを自作してみる](http://akabeko.me/blog/2013/06/web-
font/)のように図形をフォント化し、作成したWebフォントをブラウザーに読み込むことで意図した図形を表示することもあります。  
[The Icons](http://fontawesome.io/icons/)のようによく使われる図形が既にフォント化され公開されている場合もあります。


CC BY-SA 3.0
2017-01-02T22:08:40.480
31575
2017-01-02T22:08:40.480
4236
31558
answer


あなたがタイトル中に含められている文字(本文中のリンクは補助的な情報に止めるようにして、リンク先を見なくても質問が意味を成すようにしてください)は次の3つのUnicodeコード値からなる合成文字です。

> U+164F CANADIAN SYLLABICS CARRIER SO
>
> U+0324 COMBINING DIAERESIS BELOW
>
> U+032B COMBINING INVERTED DOUBLE ARCH BELOW

環境依存で読めない場合があることはわかっているのですから、質問の本文中では(せめてソースを確認してくれた人には)文字コードがわかるように記載した方が良かったでしょう。

ᙏ̤̫  
↑  
`&#x164F;&#x0324;&#x032B;`

このような非標準の合成文字がどのように描画されるかと言うのは完全に環境依存で、Mac版のChromeのように豆腐が3つ並ぶ場合もあるでしょうし、合成されずに3つの字型が横に並ぶこともあるかもしれません。

どうしても、3つの文字を使って絵文字風の文字を(環境非依存に)表示したいのであれば、合成文字を使わずに別々の文字として記載した上で、CSS等を使って意図的に重ね合わせないといけないでしょう。

[code]

      span.first {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        width: 1.2em;
        height: 1.5em;
        text-align: center;
        vertical-align: baseline;
      }
      span.second {
        display: inline-block;
        position: relative;
        top: 0.8em;
        margin-left: -1.2em;
        width: 1.2em;
        text-align: center;
        vertical-align: baseline;
      }
      span.third {
        display: inline-block;
        position: relative;
        font-size: 50%;
        margin-left: -2.4em;
        top: 1em;
        width: 2.4em;
        text-align: center;
        vertical-align: baseline;
      }
[/code]

[code]

    <span class="first">&#x164F;</span><span class="second">&#x00A8;</span><span class="third">&#x23D6;</span>
[/code]

(もっとうまいやり方はありそうですが、こんなものを記載した意図としては、「ここまではやりたくないよね」なので、こんなもんで。)

要はMacやiOSでは普通に入力・表示できる絵文字の一部がWindowsでは表示できないのと同じ理屈です。同じMacなのにSafariとChromeで動作が異なるのは、HTMLのレンダリングでは通常のテキスト描画エンジン丸々は使えないため、ブラウザだけの独自処理を行っている部分があるせいでしょう。(Chromeでもシステム側にテキスト表示を丸投げしているらしいタイトル部分では正常に表示されていますから。)

**環境非依存にしたいのなら、合成文字は使い物にならない** と覚えておいた方が良いでしょう。


CC BY-SA 3.0
2017-01-03T11:02:04.323
31589
2017-01-03T11:02:04.323
13972
31558
answer