- このトピックには11件の返信、2人の参加者があり、最後に
により9年、 6ヶ月前に更新されました。
-
投稿
-
-
Zenfone 2 laserで、Marshmallowのアップデートをかけた場合、標準で使われるフォントがNoto Sansなのですが、Simplicityを使っているページが軒並み表示が崩れるのでご報告申し上げる次第です。
このサイトも少し崩れています。
ベースラインがズレているのか、どうもしっくりきません。
以下のようにCSSを設定したところ、なんとなくうまくいきましたのでご報告致します。しかし、何故うまくいったのか私も分かりません。
CSS設定前 http://i.imgur.com/72hRINC.jpg
CSS設定後 http://i.imgur.com/ZMZarfg.jpg@font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 400; src: local('NotoSansJP-Regular.otf'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format("opentype"); } * { font-family: Arial, Helvetica, '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'Noto Sans Japanese', sans-serif; } -
僕はOSがlinuxでnoto sansしか入れてませんが、simplicityのデフォルトでも特に問題がないので、フォントと言うよりはもしかするとAndroidのブラウザに問題があるのかも知れませんね。
例えば、フォントウェイト(設定例で言う400)がAndroid側にないとかで、他のウェイトが代用されているのかも知れません。cssでそれらが追加されたら読み込まれるとかそういう感じかなぁと、想像はしてますが、元々どこに問題があってどのように表示がおかしかったのかがよくわからないので何とも言えない感じです。
-
-
-
お二人様、すぐさまお返事をいただきありがとうございます。
どうもバグっぽい挙動ですが、他のAndroid機では今のところ遭遇していないので、Zenfone2Laserだけかも知れません。
わいひら様の提示されたCSSは両方とも意図した表示になりました。
上と同じなので、キャプチャーは省略します。そして、面白いことに、
body { font-family: Arial, sans-serif; }でも意図した表示になりました。もう訳が分かりませんのでとりあえずこのまま様子を見てみます。お騒がせ致しました。
-
とりあえず、#45913のコードを適用しても、他の機種の表示には影響ないと思うので、次のバージョンでこれに変更したいと思います。
-
#45911で、元々どこがおかしかったのかがわからないと言うことを書いたわけですが、その後のわいひらさんのレスで半角がおかしいとありましたので、見直してみたんですけれども、質問のcssのように最初にArialとHelveticaが来ていれば、半角はそれで表示されると思うんですよ。
ArialがなければHelvatica、それもなければ…と。Arial、Helvaticaには日本語はないですから、日本語部分はその後の日本語のフォントが該当するわけですが、windowsなら游ゴシックがあたり、macなら游ゴシック体があたりと言う感じでそれぞれにフォントの有無を比較しながら右の候補へと移っていきます。
游ゴシック、ヒラギノ、メイリオが無い場合にようやくnotoに到着するわけですが、notoを主に表示させたいと言う中でアルファベット数字はArialと言うことなら、#45915は正しいと思うんです。
ブラウザデフォルトのフォントをそれぞれのPCが游ゴシックにしてあれば、notoが無い場合は游ゴシックになりますよね。ただ、webfontが読み込まれている中で、それがfont-familyに設定してあるのであれば、ブラウザデフォルトは関係なくnotoが読み込まれると思うんですよ。そこに該当する文字がなければsans-serifつまりはブラウザデフォルトのが代替で表示するわけですが、たいていnotoで表示されると思います。
例えば僕のように、Arialが入っていない場合は、それっぽい別のフォントがそこを代替して、webfontのnotoで表示されると言う感じです。webfontが読み込まれていないのであれば、僕のPCではsans-serifがnotoなので結局notoで読み込まれるのですが、一般的なPCなら別の游ゴシックやヒラギノ等が表示されると思います。
で、最初の投稿の中を見ると、src: localと言うのが見えるので、おそらくAndroidに入っていると思われるnotoを読み込もうとしているわけですよね？もちろんCDN等から読み込むよりもローカルのほうが速いだろうと思うのでこれは間違っていませんが、実際にローカルにそのフォントがあればと言う前提でもあるわけです。もしローカルになければwebから拾ってくるようにしてあるので、書き方自体は間違っているわけでもありません。
一般的には、
<link rel=”stylesheet” href=”http://fonts.googleapis.com/earlyaccess/notosansjp.css”>
こういうのがヘッドタグに書いてあればfont-familyで指定できるようになります。その場合の指定は、szsukeさんの指定だと、.test { font-family: Arial, 'Noto Sans JP', sans-serif; }こういう感じです。
'Noto Sans Japanese'はアドビとGoogleが共同開発したやつで、'Noto Sans JP'はGoogleのものです。違いは、Demi Lightのフォントウェイトの有無です。これらが無い分JPの方が軽いと記憶しています。で、
//fonts.googleapis.com/earlyaccess/notosansjp.cssをヘッドタグに仕込むには、wp_enqueue_styleと言うのを使います。サンプル: wp_enqueue_style | jsFiddle
※403対策。jsFiddle上では何も起こりません。ソースを公開するためだけに利用しています。これを子テーマfunctions.phpに書きます。うちのテストサーバーでテストした所、サイズは2.18KB、転送量は286バイト、50msで読み込んでますので、実用に耐えると思います。
まぁ現状とこのやり方で変わるか変わらないかはやってみないと何とも言えませんが、コピペだけで書けるのでテストがてら試してみてください。で、何か変化があれば報告してもらえると助かります。
-
linkタグが403だったか…＆ｌｔ；で何とかいけました。
function addStyle_notoJP() { wp_enqueue_style('noto-JP', '//fonts.googleapis.com/earlyaccess/notosansjp.css'); } add_action('wp_enqueue_scripts', 'addStyle_notoJP');jsFiddleの中身はこんな感じです。これが403かなぁと思って別にしましたが面倒くさいのでそのまま貼りました（笑）
-
わいひら様
ご迷惑をおかけします。よろしくお願いいたします。hidekichi様
専門的なお話になっておりまして、なかなかついて行けておりませんが、
もしかすると、正常な表示だと思っている表示は、半角英数字がArialなのかも知れません。
フォントを見定めるだけの目が無いので、違和感が無い＝正常表示という判断をしてしまっています。
せっかくご教示いただいたのですが、難しそうなので、ゆっくり試してみたいと思います。
「このサイトにZenfone 2 laseからアクセスしてスクリーンショットを撮れ！」というミッションなら
喜んでお受け致します。 -
サンプル: font-family比較 | codepen
赤枠: Arial, ‘Noto Sans JP’, sans-serif
青枠: Noto Sans JPのみ
緑枠: ‘游ゴシック’, ‘Yu Gothic’, ‘游ゴシック体’, ‘YuGothic’, ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, ‘Meiryo UI’, ‘メイリオ’, Meiryo, sans-serif;最初の3つと、次の3つは比較できるように同じものが入ってます。
モバイル端末ではタイトルだけが表示されるようにしてあります。
で、現在のSimplicity公式は ‘Hiragino Kaku Gothic ProN’, Meiryo, sans-serifが設定してあるようです。これらを見比べて、その違いを確認してもらえたらと思います。 -
hidekichi様
検証用のページをご用意いただき、ありがとうございました。
結論から言うと、全て同じ表示になりました（汗
バグとして洗い出せそうであれば、ASUSの方にバグ報告を上げてみたいと思います。 -
ちなみにうちのはこう見えますが、
赤: Arial, ‘Noto Sans JP’, sans-serif
青: Noto Sans JPのみ
緑:‘游ゴシック’, ‘Yu Gothic’, ‘游ゴシック体’, ‘YuGothic’, ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, ‘Meiryo UI’, ‘メイリオ’, Meiryo,sans-serif;こういう事だと理解してもらえると思います。赤のArialはたぶんそれっぽいのが適用されているんだと思うんですが、下2つは同じですよね？つまりnotoが適用されているわけです。うちにはヒラギノやら游ゴシックはないですからsans-serifがnotoなわけです。現にszsukeさんの最初のスクリーンショットと比べて日本語部分は同じなのでこれがnotoだと確定できます。
webfontですから青のように見えて欲しいのですが、szsukeさんのスクリーンショットを見るとwebfontのみのところにもArialっぽいのが適用されているようです。
指定がないのにそれが適用されると言うことは、モバイルではアルファベットと数字を強引にローカルの英語フォントを利用する仕組みがあるのかも知れません。これは利用されているブラウザがどういう仕様かを調べる必要がありそうですし、他の端末で正しく表示できるならその問題の端末のバグなり独自仕様なのかも知れません。ここらは何とも言えませんが、!importantをつけたらどうかも気になるところですね。
-
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。