【助けて】さくらのサーバーだとIE9以降でwebfontが文字化けする

  • 15
    Like
  • 4
    Comment
More than 1 year has passed since last update.

結論から言うと、解決したのですが、そもそも対応があってるのかわからないので、もっとよいやり方がありましたら教えていただけると、丸2日間「IEシネ!IE死ね!」と叫び続けて憔悴しきった僕の心が救われます。

webfontのクロスドメイン問題

そもそも、webfont使う時にまずこの対策をしとかないとダメなんですが、どうやらさくらのサーバーでは効かないというのが今回の問題の発端。通常のクロスドメイン対策はこちら。
IE9以降でwebfontが文字化けする原因と解決策

ようするにHTTPのレスポンスヘッダにAccess-Control-Allow-Originを加える処理(Header set)をapacheにさせてるということですね。

が、問題が発生。

さくらのサーバーではheaderが使えない

Header使える? | .htaccess < Wiki | さくらのレンタルサーバ非公式FAQ

たぶん使えない。ヘッダを追加したい場合はCGIやPHPで出力するか、他の代替手段を考えてみる。

クソ野郎ぉ!!!!!!!!

てことで、phpで強引にheaderを書き換える方向で。

フォントファイルへのアクセスをphpでプロキシする

このあたりを読んでみていろいろ試した結果動いたコードが以下。

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff

RewriteEngine on
RewriteBase /
RewriteRule (.*).(eot|eot#iefix|ttf|otf|woff)$ assets/fonts/proxy.php?url=$1.$2 [L]

proxy.php
<?php
header("Access-Control-Allow-Origin: *");
readfile($_GET['url']);
?>
  1. 通常の手順も一応書いとく(もちろんさくらでは動かない)
  2. AddTypeはなくても大丈夫かも(未確認)
  3. RewriteBase /も必ず書く
  4. RewriteRule フォントファイル プロキシまでの絶対パス
  5. .htaccessをフォントディレクトリに配置

注意点は、

  • RewriteRuleでプロキシまでの絶対パスの最初を/はじまりにしちゃうとダメ
  • 最後の改行だ無いとダメ

僕は、assets/fonts/以下にフォントをまとめてごそっと入れてるのですが、なかには階層がネストしたものもあるけど、とりあえず
assets/fonts/直下に.htaccessproxy.php置いとくだけでいけました。

ともかく解決して良かった…