解決しました。リンク
いろいろやったのでまとめ
最終目標: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 件のコメント:
コメントを投稿