none
ASP.NET(IIS6.0⇒IIS8.5)のサイトのせかえ後、Windows10のIE11でのせかえ前と後のサイトをみるとフォントサイズに差異がある RRS feed

  • 質問

  • ASP.NETでのサイトののせかえ(IIS6.0⇒IIS8.5)をしていまして、

    Windows10でIE11でのせかえ前とのせかえ後のサイトを開くと

    フォントに差異があります。(のせかえ後の方がフォントが大きいため変なところで改行されたりする。)

    のぜかえ前後でソースコードの内容に差異はなく、Web.configの設定は使用する.netframeworkのバージョンを3.5から4.5.2に

    書き換えしたのみとなります。

    差がIISのバージョンとそのIISを動かしているOSになるため、IISの設定で何かしらフォントに影響のある箇所があると考えています。

    ウェブで検索しましたが、IISでのフォント設定に関する部分は見つけきれず。

    何かしらご存知でしたら大変お手数ですがご教授お願い致します。

    以下、環境になります。

    サーバーOS、IIS、開発ソフト、フレームワーク

    のせかえ前 Windows Server2003 SP1、IIS6.0、VisualStudio2008 ASP.NET 、.net framework3.5

    のせかえ後 Windows Server2012 R2 Standard、IIS8.5、 VisualStudio2015 ASP.NET 、.net framework4.5.2

    皆様のご回答を元にF12 開発者ツールを使用し、差異確認を実施しましたところ原因が特定できました。

    ①のせかえ後は、互換設定が有効になってしまいドキュメントモードがIE11ではなくIE5として動作していた。

    のせかえ前のサイトはIPアドレス指定、のせかえ後のサイトは端末名指定で、IE11の互換表示設定をみると

    イントラネットサイトを互換表示で表示するにチェックが入っていた。

    社内ネットワークでも端末名指定だとイントラ扱いとなっていたようです。

    ②CSSのFont-Familyがのせかえ前は文字化け、のせかえ後はMSPゴシックとなっていた。

    2017年8月25日 1:06

回答

  • この場合だとSurferOnWwwさんの指摘されている通り、IEのデフォルトのフォントが適用されるのではないかと思います。

    なお、IEはコードページによってデフォルトのフォントに違いが発生するという仕様(?)がありますので、その影響で「同じデフォルトフォントなのに差異が発生している」と認識されている可能性はないでしょうか?


    参考: 文字コードをShift_JISからUTF-8に変更した場合のInternet Explorer(IE)での表示問題

    少し古い情報でIEのバージョンも異なりますが、確認の参考になるのではないかと思います(手元で少し試した範囲では、IE11 on Windows 10 CU で utf-8 と Shift_JIS でフォントファミリーが異なるのは確認できました)


    きよくらならみ

    2017年8月31日 5:55
  • デフォルトが何になるか調べた記事がありましたので、ご参考にその記事の URL を書いておきます。

    フォントカタログ5・ブラウザのデフォルトフォント
    http://rinrin.saiin.net/~aor/fonts/defaultfonts

    IE11 では font-family: "Times New Roman", "MS Pゴシック" になるようです("Times New Roman" が先になることに注意)。

    実際に自分の PC Windows 10 Pro 64-bit の IE11 更新バージョン 11.0.45 (KB4034733) で試してみましたが、その通りのようです。以下の画像の上が font-family: "MS Pゴシック" としたもの、下が無指定(デフォルト)です。

    今回のような問題を避けるために、"MS Pゴシック" ではなくて "MS PGothic" を使うべきなのかもしれません。

    2017年8月31日 6:57

すべての返信

  • IISにはフォント設定は存在しません。ブラウザー側の開発者ツールにてフォントがどの設定に基づいて決定したのか、その設定がどこに存在するのか原因を確認すべきです。
    2017年8月25日 1:48
  • 何が原因かは質問に提供されている情報ではわかりませんが、

    > のせかえ前と後のサイトをみるとフォントサイズに差異がある

    ということは、適用されているスタイル(特に font-size  と font-family)に違いがあるということだと思います。

    少なくとも IIS, Visual Studio, .NET Framework のバージョンの違いはスタイルに直接影響はないので、それらを疑ってその方向から調査するのは見当違いではないかと思います。

    ただし、Visual Studio については、もし、テンプレートを使って web アプリのひな型を自動生成させていたりすると、バージョンによって使っている css が異なるので、結果 VS2008 と VS2015 で font が異なるということはあります。

    以下の画像は VS2015 Community のテンプレートで自動生成したアプリのスタイルを F12 開発者ツールで表示したものですが、赤枠で囲ったように bootstrap の css を利用しています。VS2008 が何だったかは忘れましたが、css は異なるのは間違いないです。

    とにかく佐祐理さんが言われるように質問者さん自身で F12 開発者ツールを使って、スタイル(特に font-size, font-family)の違いや、それがどこで定義されているかを調べてください。

    それが解決の糸口になるのではないかと思います。

    2017年8月25日 3:12
  • あてずっぽうですが、以下の可能性はないでしょうか?

    1.一方にIEの互換モードが適用されている可能性

    アドレスの違いなどにより一方のみにIEの互換モードが適用されされ、HTMLやCSSのレンダリングに差異が出るケースは可能性としては考えられます。
    IEの互換表示設定や、エンタープライズ モードについての確認がまだであれば一度確認されると良いのではないでしょうか。

    また、開発者ツールで現在のドキュメントモードを確認することができますので(「エミュレーション」タブ)、そちらも確認されると良いかもしれません。


    2.CSSやJavaScriptのリンク切れが発生している可能性

    相対パスやスキーマの差などにより読み込めなくなっているCSSやJavaScriptが発生し、それが影響しているということはないでしょうか?
    これらのリンク切れが発生しているかどうかは開発者ツールの「コンソール」等で確認できると思います。



    きよくらならみ

    2017年8月25日 8:55
  • 佐祐理様

    ご返信ありがとうございます。

    IISでフォントの設定を調べるのは誤りで、ブラウザー(IE11)側で開発者ツールを使用して

    フォント差異が発生している要因を探した方が良いということですね。

    一度確認してみます。

    2017年8月25日 10:09
  • SurferOnWww様

    ご返信ありがとうございます。

    細かいところまで具体的に提示頂き助かります。

    CSSで差異がでているかもしれないのでそちら確認してみます。

    2017年8月25日 10:12
  • きよくらならみ様

    ご返信ありがとうございます。

    互換モードに差異がでているかは確認致しておりませんでした。そちら確認してみようと思います。

    リンク切れについても同様に確認します。

    ご助言頂きありがとうございました。

    2017年8月25日 10:14
  • > のせかえ前後でソースコードの内容に差異はなく、Web.configの設定は使用する.netframeworkのバージョンを3.5から4.5.2に書き換えしたのみとなります。

    そこが絶対間違いないのであれば「CSSで差異」はないはずなのですが、何にせよ F12 開発者ツールで調べてください。話はそれからだという気がします。

    それに差異がなければ、きよくらさんの指摘された標準・互換モードの違いが怪しいと思いますが、それも F12 開発者ツールで分かります。

    2017年8月25日 10:25
  • SurferOnWww様

    ご返信ありがとうございます。

    おかげさまで原因の特定まではできました。2つあり片方は互換設定だったので設定で対応できたのですが、

    もう片方は文字化けしていたため差異になっており、その文字化けしてたときに何のフォントが設定されていたかが分からない状況です。

    のせかえ前後でフォントを一致させたいため、のせかえ前に文字化けしていたときに設定されていたフォントが知りたく

    文字化けしていないとMS Pゴシックが設定されていた状況です。

    IE11のフォントのウェブページフォントが適用されていると想定し、のせかえ後のフォントを「MS Pゴシック」から

    IE11のフォントのウェブページフォントに変えましたがのせかえ前後で一致せずといった状況です。

    文字化けしていた場合に、代替えになるデフォルトフォントに変わると考えていますが

    それが具体的に何か知るすべがあれば教えて頂けないでしょうか。

    2017年8月29日 12:04
  • 話が通じてません。すみませんが、あなたが何を言ってるのか分かりません。

    標準/互換モードの問題を解決したら、あなたの言う、

    > のせかえ前と後のサイトをみるとフォントサイズに差異がある

    は解決したのですが?

    それともそれだけではダメで、

    > もう片方は文字化けしていたため差異になっており、

    という問題もあったのですか? とすると、文字化けって何ですか? 意味不明なんですが・・・

    それを解決するために、標準/互換モード対応の他に、何か別の手段も取ったのですか? とするとそれは具体的にどういう対応ですか?

    一番最初の質問に書いてあった、

    > Windows10でIE11でのせかえ前とのせかえ後のサイトを開くと

    の「Windows10でIE11」は同一 PC の同一 IE11 ではないのですか? 違う PC、違う IE11 で見ていたら違う結果になっても不思議はないのですが・・・

    2017年8月29日 12:31
  • SurferOnWww様

    ご返信ありがとうございます。

    説明不足、下手で申し訳ございません。

    整理致します。

    のせかえ前のサイト(A1とB1)、のせかえ後のサイト(A2とB2)を構築しています。

    A1とA2は同じもの、B1とB2も同じものでIISのバージョンとサーバーにそれぞれ差異があります。

    まずA1とA2については、互換設定の差異によりフォントに差異が発生していました。

    理由はA1のサイトは、IPでのアドレス指定でグローバル扱い、A2のサイトは端末名の指定でA2のサイトの方がイントラ扱いとなっており

    結果、イントラネットサイトを互換表示で表示するにチェックが入っていたため差異になりました。

    この問題はIE11のイントラネットサイトを互換表示で表示するのチェックを外すことで対応できました。

    B1とB2については、互換設定の差異等ではなくB1のフォントが文字化けしているためB1とB2で差異が出てしまい

    一致しないと思われます。

    具体的にどう文字化けしているかはこの後の投稿で画像載せます。

    >という問題もあったのですか? とすると、文字化けって何ですか? 意味不明なんですが・・・

    >それを解決するために、標準/互換モード対応の他に、何か別の手段も取ったのですか? とするとそれは具体的にどういう対応ですか?

    IE11のツール→インターネットオプション→フォントでウェブページフォントが指定可能なので、そこで指定しているフォントをCSSに書くことで差異が出ていないかを確認しました。結果、一致せずです。

    >の「Windows10でIE11」は同一 PC の同一 IE11 ではないのですか? 違う PC、違う IE11 で見ていたら違う結果になっても不思議>はないのですが・・・

    同一PCのIE11でのせかえ前とのせかえ後の差異は、サーバーとIISです。CSSファイルがShift-Jisで作成されており

    Windows2003のときにそれを読むと文字化け、CSSファイルをUTF-8にすると文字化けせず「MS Pゴシック」で読むことができました。

    2017年8月30日 15:40
  • SurferOnWww様

    ご返信ありがとうございます。

    1つ前の続きで文字化けの画像になります。

    IE11のF12(開発者ツール)でのせかえ前(B1)とのせかえ後(B2)をみたときの結果になります。

    のせかえ前

    のせかえ後

    上記のような状況のため、のせかえ前の文字化けしているフォントが何のフォントに置き換えられて実際動いているかどうかが

    分からないといった状況です。

    のせかえ後のCSSのフォントを「MS Pゴシック」からIE11のツール→インターネットオプション→フォントでウェブページフォント

    に変えて比較したり、メイリオやMSゴシック等デフォルトフォントに該当しそうなものに置き換えてみましたが差異になっている

    といった状況です。

    2017年8月30日 15:55
  • > 同一PCのIE11でのせかえ前とのせかえ後の差異は、サーバーとIISです。CSSファイルがShift-Jisで作成されておりWindows2003のときにそれを読むと文字化け、CSSファイルをUTF-8にすると文字化けせず「MS Pゴシック」で読むことができました。

    質問者さんがアップされた F12 開発者ツールの画像によると「のせかえ前」が Shift_JIS、「のせかえ後」が UTF-8 になっていると理解しています。

    ということは、標準・互換モードの違いの話は別として、見え方の違いの原因の全ては「のせかえ前」の .css ファイルの文字コードの設定誤りによるものだったようですね。

    > のせかえ前の文字化けしているフォントが何のフォントに置き換えられて実際動いているかどうかが分からないといった状況です。

    ブラウザは UTF-8 を期待しているので、「のせかえ前」の日本語で書かれた font-family の指定を解釈できずデフォルトのフォントを使った。一方、「のせかえ後」は正しく解釈できたので指定通りのフォントを使ったということだと思います。


    念のため当方でも検証してみました。

    .style1 { font-family:"MS Pゴシック" }

    という一行のみを含む文字コード Shift_JIS の .css ファイルをブラウザから取得すると以下の画像(Fiddler で応答をキャプチャしたもの)の通りになります。

    反転表示した 16 進数でのバイト列 82 6C 82 72 ... 83 4E は Shift_JIS コードの「MS Pゴシック」に該当します。

    ASCII 文字(上の css のコードで「MS Pゴシック」以外の部分)は Shift_JIS でも UTF-8 でも同じ文字コードなので正しく解釈できます。

    しかし、Shift_JIS のバイト列 82 6C 82 72 ... 83 4E(「MS Pゴシック」の部分)を、文字コード UTF-8 として処理しようとするので、結果ブラウザにとって font-family の指定が意味不明ということになって(F12 開発者ツールで見ると文字化けしているように見える)、デフォルトのフォント使うということになるはずです。


    2017年8月31日 3:02
  • この場合だとSurferOnWwwさんの指摘されている通り、IEのデフォルトのフォントが適用されるのではないかと思います。

    なお、IEはコードページによってデフォルトのフォントに違いが発生するという仕様(?)がありますので、その影響で「同じデフォルトフォントなのに差異が発生している」と認識されている可能性はないでしょうか?


    参考: 文字コードをShift_JISからUTF-8に変更した場合のInternet Explorer(IE)での表示問題

    少し古い情報でIEのバージョンも異なりますが、確認の参考になるのではないかと思います(手元で少し試した範囲では、IE11 on Windows 10 CU で utf-8 と Shift_JIS でフォントファミリーが異なるのは確認できました)


    きよくらならみ

    2017年8月31日 5:55
  • デフォルトが何になるか調べた記事がありましたので、ご参考にその記事の URL を書いておきます。

    フォントカタログ5・ブラウザのデフォルトフォント
    http://rinrin.saiin.net/~aor/fonts/defaultfonts

    IE11 では font-family: "Times New Roman", "MS Pゴシック" になるようです("Times New Roman" が先になることに注意)。

    実際に自分の PC Windows 10 Pro 64-bit の IE11 更新バージョン 11.0.45 (KB4034733) で試してみましたが、その通りのようです。以下の画像の上が font-family: "MS Pゴシック" としたもの、下が無指定(デフォルト)です。

    今回のような問題を避けるために、"MS Pゴシック" ではなくて "MS PGothic" を使うべきなのかもしれません。

    2017年8月31日 6:57
  • きよくらならみ様

    ご返信ありがとうございます。

    フォントのCSSをのせかえ前後でShift-Jisから変換はしていませんが、

    おそらくご指摘頂いたURL(リンク)の現象が発生していると思われます。

    のせかえ後のIEのデフォルトフォントの設定を「MS Pゴシック」「MS PGothic」としても

    のせかえ前と見た目が一致しないのでご指摘頂いたURLの現象ですね。

    大変助かりました。

    ありがとうございました。
    2017年9月4日 2:09
  • SurferOnWww様

    ご返信ありがとうございます。

    そうですね、ご回答頂いた画像の見た目の感じで英文字は添付頂いている通りの差になっています。

    文字も若干サイズが異なって見えていました。

    助かりました。ご丁寧に何度もご返信頂きありがとうございました。

    一旦これで〆させて頂きます。

    2017年9月4日 2:14