Q&A
HTMLとセレクタを追加してもらえるでしょうか？
前提・実現したいこと
クロームで表示されているのと同じようにサファリで表示したい。
エラーメッセージ
padding-bottom: 15px; background-color: rgb(73,130,70); width: auto; height: 32px; display: inline-block; padding: 3px 10px; line-height: 32px; color: #fff; letter-spacing: 3px; margin-bottom: 25px; font-size: 16px; text-align: center;
ソースコード
試したこと
補足情報（FW/ツールのバージョンなど）
letter-spacing: 3px;がサファリでは効いていて文字の間に感覚が取られているのに対して、サファリでは、文字間が詰まっていて、そのあとに変なスペースが取られている状況
・環境
mac osx サファリ[バージョン 10.1.2 (10603.3.8)] クローム[バージョン: 65.0.3325.181（Official Build） （64 ビット）]
・html
<p class="menuitemtitlebox01">hoge</p>前提・実現したいこと
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
-webkit-text-size-adjust
補足情報（FW/ツールのバージョンなど）
フォントファミリーについて、の記述です。
font-family:'MS P Gothic', Osaka, "ヒラギノ角ゴ Pro W3"; font-size:12px; color:#3e2212;
はじめは'MS Pゴシック'と、日本語で書いてあり、英語に直してみたのですが、特に変わりなしでした。
font-weight については、指定されておりません。
日本語でアップしていた時には、サファリのデベロッパーツールで見るとその部分が文字化けしており、そこをコメントアウトすると、通常どうりの letter-spasing が適用されていました。
質問テンプレートの文字列が残ってしまっていますので、不要な部分は削除してください。
OSやブラウザのバージョン等の使用環境も併せて提示して貰えれば、より良い回答を得れると思います。
x_x様 <p class="menuitemtitlebox01">hoge</p> よろしくお願いいたします。
kei344 様 了解いたしました。
yoshinavi 様 mac osx サファリ[バージョン 10.1.2 (10603.3.8)] クローム[バージョン: 65.0.3325.181（Official Build） （64 ビット）] よろしくお願いいたします。
使っているフォントと、指定してあるfont-weightは何でしょうか？ それと、重要な情報はここに追記するのではなく、質問文自体を編集してくれるとありがたいです
あら、font-familyは本当にそう記述してあるのですか？
回答3件
0
文字化けは、ファイル先頭の@charsetにより回避することができるかもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/@charset
変なスペースというのはこれでしょうか。
http://webtech-walker.com/archive/2011/03/30190850.html
明確な解決方法がなくて申し訳ないですが、フォントやletter-spacingの調整で改善するかもしれません。
投稿2018/03/30 01:51
総合スコア13749
0
自己解決
font-family:MS-PGothic, Osaka, "Hiragino Kaku Gothic Pro W3"; font-size:12px; color:#3e2212;
で、解決することができました！！ x_x 様、ありがとうございました。
追記）
二度目の検証で
font-family:'MS P Gothic', Osaka, "ヒラギノ角ゴ Pro W3";
と記載してダメだった理由は正しいソースコードが以下のためです。
font-family:'MS PGothic', Osaka, "ヒラギノ角ゴ Pro W3";
こちらで正確に表示されました。検証済みです。
後、ヒラギノ角ゴの記述も間違っており、正しくは
font-family:'MS PGothic', Osaka, 'hiragino kaku gothic pro';
で、検証済みです。
Osaka が適用されている時に、letter-spacingがずれる事も確認いたしました。
挙動としては、下記URLと似た挙動でした。
http://sengyoaruji.iinaa.net/20160222a.html
投稿2018/03/30 01:41
編集2018/04/02 01:37総合スコア11
文字化けが問題だったということは
CSSの文字コードの判定に失敗(shift_jis?)orWebKit(Safari)のCSSパーサーが日本語そのものを解釈できなかった
→結果文字化けが発生し, CSSの文法が破綻. 結果font-family以降のletter-spacingプロパティ設定が無視されていた
ということかな？
https://oshiete.goo.ne.jp/qa/5006749.html
これを見て解決しましたが、基本的にクロームやサファリは、日本語フォントダメのようです。macなので、日本語はダメだとの解釈をしました。それ以上のことはわかっていません。
canvas要素でのフォント設定においても似たような現象が発生した記憶があるので, フォント名はasciiでの記述がベターということでしょうね
おそらく、そうかと思います。
「解決済」ですが、「MSPゴシック」のOSによる指定の違いは分かったのですが、気になるところがあったので･･･。
①最初の状態では「MSPゴシック」が適用されて「文字化け」を起こしていればすぐに分かるのではないのでしょうか？それが原因でCSSが破綻していたのであれば、その後のフォント絡み全てのレイアウトが崩れてもおかしくないと思うのですが、フォント指定場所はどこなのでしょうか。崩れた部分のみでしょうか？
②それとも「MSPゴシック」は適用されていないのにletter-spacingのズレが発生していたのであれば、どのフォントが適用されていたのでしょうか？
私の知識不足で、状況が今ひとつ理解できなかったので解決済なのに質問してスミマセンが、勉強の為、ご回答いただければと思います。
-追記-
「letter-spacing」のスペルの実際のコードは合っていますか？質問文のみが誤りでしょうか？
問題を引き起こしていたのは「ヒラギノ角ゴ Pro W3」の部分じゃないかな
まず
font-family:'MS Pゴシック', Osaka, "ヒラギノ角ゴ Pro W3";
となっていて、
font-family:'MS P Gothic', Osaka, "ヒラギノ角ゴ Pro W3";
としてみたけれど駄目で
font-family:MS-PGothic, Osaka, "Hiragino Kaku Gothic Pro W3";
としたらようやくうまく行ったみたいな
あと、これ以上の真相は質問者環境で実際にコンソールを開いてみるなどしないと判らないと思います.
「defghi1977」様、ご回答ありがとうございます。
そうですね、外部からは判断のしようがない部分ですよね。しかし「「defghi1977」様の「CSSパーサー」と言う単語を知り得たので、フォント関連のみならず、今後の知識の幅を広げる為、勉強課題にして行きたいと思います。
誠にありがとうございます。
-追記-
実はOsakaが原因でこういう事でしょうか？
http://sengyoaruji.iinaa.net/20160222a.html
yoshinavi 様
defghi1977 様
回答します。
①最初の状態では「MSPゴシック」が適用されて「文字化け」を起こしていればすぐに分かるのではないのでしょうか？それが原因でCSSが破綻していたのであれば、その後のフォント絡み全てのレイアウトが崩れてもおかしくないと思うのですが、フォント指定場所はどこなのでしょうか。崩れた部分のみでしょうか？
回答）
かなり古いサイトでほとんどが画像で作成してあるサイトで
それをcssで書いたため起きたトラブルでした。間違えなくフォントの問題でした。
②それとも「MSPゴシック」は適用されていないのにletter-spacingのズレが発生していたのであれば、どのフォントが適用されていたのでしょうか？
回答）
Osaka が適用されていたと思われます。
二度目の検証で
font-family:'MS P Gothic', Osaka, "ヒラギノ角ゴ Pro W3";
と記載してダメだった理由は正しいソースコードが以下のためです。
font-family:'MS PGothic', Osaka, "ヒラギノ角ゴ Pro W3";
こちらで正確に表示されました。検証済みです。
後、ヒラギノ角ゴの記述も間違っており、正しくは
font-family:'MS PGothic', Osaka, 'hiragino kaku gothic pro';
で、検証済みです。
Osaka が適用されている時に、letter-spacingがずれる事も確認いたしました。
突き詰めて検証してみて、色々と学ぶ事ができました。ありがとうございました。
（そういえばこの前もOsakaフォントで死んでる人いたな・・・）
to ogiogiさん
お疲れ様です. この調査内容を回答に統合されてはいかがでしょうか？
追記）
http://sengyoaruji.iinaa.net/20160222a.html
の記述にかなり近い挙動をしていました。
Osaka自体が古い設計で今日のWEBに必要とされている各種パラメータが足りていないのかもしれませんね
推測にしかなりませんが、古い作りを継承（？）しているサイトに「Osaka」を組み込んでいるのは、かなり多いのではないでしょうか？
･･･実は私も自サイトに2年前まで指定に入れていました。ただ、Windows環境のため気付かずに今日まできてしまい「ogiogi」様のご質問により、改めてフォント確認の重要性を再確認することができ、勉強になりました。
「ogiogi」様、「defghi1977」様、勉強の機会を頂き、ありがとうございます。
(^^)
そうですね、万が一の事も考えて、Osakaの記述は全て消そうとおもいます。
ありがとうございました！！
あなたの回答
tips
プレビュー
