search
LoginSignup
17

More than 5 years have passed since last update.

posted at

updated at

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

結論から言うと、解決したのですが、そもそも対応があってるのかわからないので、もっとよいやり方がありましたら教えていただけると、丸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置いとくだけでいけました。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17