2018年7月22日日曜日

変体仮名をブログ上で表示したいぞ!(検討)

追記
解決しました。リンク



いろいろやったのでまとめ

最終目標:FirefoxとChoromeでの表示
現状:IEのみ表示可能

●現状
外字フォントとし、"MS 明朝"にリンクしています。
コードでは
font-family:"MS 明朝";
としています。
PC上動作
IE:○ Firefox:× Chrome:×
ブログ上動作
IE:○ Firefox:× Chrome:×



変更1
コードでは
font-family:"MS Mincho";

PC上動作
IE:× Firefox:× Chrome:×
ブログ上動作
IE:× Firefox:× Chrome:×

現状状態でFirefox動作時フォントが"MS Mincho"となっているので確認してみた。
"MS 明朝"と"MS Mincho"は違う扱いらしい。


変更2
ためしに別のフォントにリンクしてみる。
文字セットをUnicodeの"Arial Unicode MS"

コードでは
font-family:"Arial Unicode MS";

PC上動作
IE:○ Firefox:× Chrome:×
ブログ上動作
IE:○ Firefox:× Chrome:×

フォントは変わるものの変体仮名は表示できない。
外字部分はもしかしたらIE以外は表示できないのだろうか。
※なんかこれでChromeができたような気がしたけど寝ぼけていたのだろう


変更3
srcで指定してみる。local(PC内のシステム内)で直接指定してみる
@font-face {
font-family: "myFont";
src: local('Arial Unicode MS');
}

font-family: "myFont";
に変更

PC上動作
IE:○ Firefox:× Chrome:×
ブログ上動作
IE:○ Firefox:× Chrome:×

変更2と結果は同じ


変更4
WOFFコンバートして、C直下に置いてを指定してみる。
@font-face {
font-family: "myFont";
src: url("file:\\\C:\Koin変体仮名明朝f2.woff2") format('woff2'),
url("file:\\\C:\Koin変体仮名明朝f2.woff") format('woff');
}
font-family: "myFont";

PC上動作
IE:△ Firefox:× Chrome:○
ブログ上動作
IE:× Firefox:× Chrome:×

IEは変体仮名の最後に「・」が表示される。改行が怪しいのだろうか
ブログ上の場合は、ブログからPCのファイルへのアクセスができないため
表示できないと思う。
そしてブログにUPはこのブログだとできないのでどうしようもない。

font-family:"MS 明朝", "myFont";
として、IEの場合は先に"MS 明朝"で見つけるようにすることにより
「・」がなく表示できる


変更5
woffファイルをhtmlと同じ位置に置いてみる

@font-face {
font-family: "myFont";
src: url("Koin変体仮名明朝f2.woff2") format('woff2'),
url("Koin変体仮名明朝f2.woff") format('woff');
}
font-family: "myFont";

PC上動作
IE:△ Firefox:○ Chrome:○
ブログ上動作
IE:× Firefox:× Chrome:×

ついにfirefoxでも表示ができた。つまりブログをローカルに保存すればできるだろうけど、
ブログ上でやりたいのじゃ
変更4はファイルパスの書き方が悪いためか。



誰が教えてください・・・

0 件のコメント:

コメントを投稿