長文大変失礼いたします.
背景
XMLで書かれたドキュメント群を変換してHTMLにし、CSSや画像ファイルとセットでパブリッシングするのをやっています.日本語だけでなく多言語をやっております.今般お客様の意向で、従来CSSで@font-face
で指定していたフォントファイルを、今はやりのWeb Fontに置き換えることになりました.
主な狙いは日本語フォントなんだろうと思います.サーバー側に置いたTrueTypeやOpenTypeのフォントを直接@font-face
でアサインしてしまうと、フォントファイルの大きさはそれなりにありますので、ダウンロードやハンドリングに時間がかかります.Web Fontを使うと、HTMLに忍び込ませたJavaScriptで、そのWebページで使っている文字を調べて、動的にサーバー側から.woff
でサブセット化して送ってくれるそうです.それならブラウザの負担も減るでしょう.(早いかどうかはいろいろ議論があるようです)
さて、Web Fontにすると、今までCSSの中で自分で@font-face
を指定したものが、Web Fontのサービスが自動的に生成してくれるCSSの.woff
への@font-face
を使うようになります.Web Fontのサービスは、CSSのfont-family:~;
指定から、自動的に@font-face
を自動生成してくれるようです.
ここまではいいことづくめだったのですが、問題が持ち上がりました.実はCSSの中には、font-weight: bold;
が当たり前に書かれています.ところがWeb Fontの.woff
を使用するようになると、ブラウザは自動的にボールドフェースをシミュレートしてくれなくなるのです.それまでTrueTypeのフォントファイルを@font-face
でアサインしていた時は、ブラウザがボールドフェースをシミュレート表示してくれていました.
この結果、font-weight: bold;
はすべて無視されちゃって、Webページはノーマルフェースだけで文字の表示という、実にのっぺらぽうなものになってしまいます.これはとても見ていられません.
これを解決するにはWeb Fontを使う限り、以下のようにしなければなりません.(英文フォントの例になります.ファミリー名は正確ではありません)
- 大元を取り仕切るCSSで
font-family: FuturaPro-Light;
とやっていたら - ボールドにしたいときは、あちこちのCSSに存在する
font-weight: bold;
はダメで、例えばfont-family: FuturaPro-Book;
と書かねばならない.(これで太字に見えてくれます)
でもですね、フロントエンドのデザイナーさんが作ったCSSは、言語にほぼ全部共通で同じもを使っているのです.なので、運用側の都合で、ある言語ではWeb Fontを使用、でもある言語ではクライアントにあるsans-serifでいいやというのは非常に困るのです.font-weight: bold;
くらいは、どのフォントを使用しようが、それを意識することなしに自由に記述したいものです.
ちなみに多言語ですが、font-family
の指定は大本のCSSの一ヶ所でやっているだけです.もちろんアラビア語なんかのためのLTR/RTLには対応しています.(以下で少々触れますSassで吸収しています.)
考えた方法
仕方がないのでWeb Fontを使用する言語のビルドでは、最終盤のステップでCSSの中のfont-weight: bold;
があったら、そのメディアやセレクタを覚えておいて、最後にfont-family: FuturaPro-Book;
と追記してやろうか??と考えました.
ではこれをどうやってやるかを考えたのですが、パブリッシングのためのビルドで、プログラムでCSSを書き換えるってそう簡単ではないですよね.システムがJavaベースなのでJavaのCSSのパーサーを探しました、パーサーでCSSを読んで、それをXML(!)に変換してしまう、そのXMLを読んで上記の書き換え処理をXSLTで実装して、結果をまたCSSに書き戻すというものです.Webで良く出てくる CSS Parser を試してみたんですが、次のようなCSSを食わせるとお亡くなりになってしまいました.
@charset "UTF-8";
body { direction: ltr; }
body { font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"MS Pゴシック","MS PGothic",Osaka,Verdana,sans-serif; color: #000; line-height: 1.5; background-color: #fff; overflow: hidden; }
以下は試してみたプログラムの一部:
public class Css2XmlImpl {
private String mInputCssPath;
private String mOutputXmlPath;
/**
* Constructor
* @param inputCssPath
* @param outputXmlPath
* @throws IOException
*/
public Css2XmlImpl(String inputCssPath, String outputXmlPath) throws IOException {
mInputCssPath = inputCssPath;
mOutputXmlPath = outputXmlPath;
}
public void parse() throws IOException {
InputStream cssStream = null;
XmlWriter xmlOutput = null;
try {
xmlOutput = new XmlWriter(mOutputXmlPath);
cssStream = new FileInputStream(mInputCssPath);
InputSource source = new InputSource();
source.setByteStream(cssStream);
source.setEncoding("UTF-8");
SACParserCSS3 parser = new SACParserCSS3();
parser.setDocumentHandler(new Css2XMLHandler(xmlOutput));
parser.parseStyleSheet(source);
}
catch (IOException ioe)
{
System.err.println ("IO Error: " + ioe);
}
catch (Exception e)
{
System.err.println ("Error: " + e);
}
finally
{
xmlOutput.close();
}
}
}
class Css2XMLHandler implements DocumentHandlerExt {
// ここでSaxのようにCSSパーサーのいろんなイベントを拾ってXMLに書く.
}
こけたときの途中結果のXMLはこんな感じです.
<?xml version="1.0" encoding="UTF-8"?>
<css>
<charset arg="UTF-8"/>
<selector>
<selector-item>body</selector-item>
<property name="direction" LexicalUnit="ltr" important="false"/>
</selector>
<selector>
<selector-item>body</selector-item>
<property name="font-family" LexicalUnit="メイリオ" important="false"/>
</selector>
</css>
どうも
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"MS Pゴシック","MS PGothic",Osaka,Verdana,sans-serif;
のfont-family
の記述がパージングできずに、その先おかしくなってしまうようです.結果は以下のように出ます.
Error: org.w3c.css.sac.CSSException: unknown error
確かにちょっと変則的な書き方ですが、これくらいのCSSがパージングできないようでは全然ダメですね.
お伺いしたいこと
私が直面している問題は、Web Fontを使用するなら、フォントには依存しますが、どのような方でも共通じゃないか?と思うのですが、いかがでしょう?実際どのように解決しておられるでしょうか?
追記
実は、パブリッシングのためのビルドで、Sassを使用しています.なので、.scss
ファイルのfont-weight: bold;
を、@include bold-font
のようなmixinに置き換えて、そのmixinのbold-fontをSassのコンパイル毎に動的に生成しようかという案もありました.
[動的に生成するmixin:Web Fontの場合]
@mixin bold-font {
font-family: FuturaPro-Book;
}
[動的に生成するmixin:Web Fontでない場合]
@mixin bold-font {
font-weight: bold;
}
でもよく考えるとCSSというフロントデザインを、Web Fontを使うか/使わないか?という運用の問題でmixinに書き換えるというのも何か変な気がします.フロントエンド側はそこまで考えずに、デザインするのが筋ではないかと?なので、できたら、最終版でCSSを一気に書き換える方法をとりたいと考えております.
以上 よろしくお願いいたします.