今週、私は再び「非標準」フォントの問題に遭遇しました。もしそれ以前にグラフィックエディターで最も一般的なスライシングを利用したり、クライアント側のスプーフィング手法を使用したりできる場合は、今回が最もグローバルなタスクです。今後のプロジェクトには多くの動的ヘッダーがあります。

私の考え、検索、最終決定を皆さんと共有したいと思います。

前文

したがって、原則として、次のようなオプションがあります。

Flashに置き換えます：sIFR、swftype;
キャンバスに描画するJavaScript`om：cufon、typeface;
これらの目的でサーバーを使用します。

私はすでにいくつかのプロジェクトで最初のオプションを使用しましたが、実際にはsIFRではありませんが、問題ではなく、結果にあまり満足していませんでした。 IE7の「フレーム」であるFlashをチェックして、フォントを使用してFlashファイルをアセンブルおよび再アセンブルすることは、最終的には適切ではありません。 2番目のオプション-トラフィック（レンダリングされたフォントを含むファイルの重量はまともであり、常に正しく変換されないこともあります）およびクライアントのプロセッサの負荷の両方で、私は常に重すぎると考えました。だから彼は本番では彼を手放しませんでした。

だから私は3番目の選択肢に来ました。 A List Apartのアイデアを読んで、当時のphpプロジェクトの1つでこのメソッドに取り組んでいたことがあります。この方法ではJavaScriptがまだ使用されていましたが、うまく機能します。さらに、現在はDjangoのみでプロジェクトを開発しているので、検索を行ったところ、しばらくしてdjango-cairo-textとdjango-image-replacementの2つの類似プロジェクトが見つかりました。最初のものは非常に幅広い機能を備えていますが、ファイルからフォントを描画することはできません。インストールされたものの1つだけです。これは私の場合は絶対に不適切であり、2番目のものは私のニーズには単純すぎて、私にはあまり便利ではないアプローチを使用しています。

しかし、基盤があり、目標があり、私はいつものように、松葉杖をターボドライブで書くことにしました。実際、それから出てきたものは、あなたのレビューに提示したいと思います。

だからジャンゴの見出し

今日は何を知っていますか

テンプレートから3つの方法で画像をレンダリングする：フィルター、タグ、およびコンテキストを変更するタグ
当然、以前にレンダリングされた画像をキャッシュする
クラスを介した標準フォントスタイルの定義
HTMLエンティティをUnicode文字に自動的に置換します
brまたは単語でテキスト文字列を分割します
カスタムフォントとキャッシュの場所の設定
外部ユーティリティを使用した出力PNGのオプションの最適化

インストールとセットアップ

作業には、インストール済みのPILおよびFreetype2が必要です。

アプリケーションのtemplatetagsフォルダーにheadline.pyファイルを配置します。

設定には次のオプションを使用できます。

 #     (  MEDIA_ROOT/MEDIA_URL) HEADLINE_CACHE_DIR = 'upload/textcache' #    (  MEDIA_ROOT) HEADLINE_FONTS_DIR = 'fonts' #   ,    HEADLINE_PNG_OPTIMIZER = "optipng -o7 %(file)s" #    HEADLINE_CLASSES = { "<class_name>": { 'font': <file>, 'size': <size>, 'color': <hex color>, 'decoration': ['underline', 'strikeout'], # Optional }, ... }

使用例

{% load headline %}

フィルターのように

 {{ foo|headline:"font.ttf,20,#000" }} {{ foo|headline:"font.ttf,20,#000,underline,all" }} {{ foo|headline:"base,br" }}

いいねタグ

 {% headline "font.ttf,20,#000" %}Big {{ foo }}{% endheadline %} {% headline "font.ttf,20,#000,strikeout,none" %}Big {{ foo }}{% endheadline %} {% headline "base" %}Big {{ foo }}{% endheadline %}

コンテキストを変更するタグとして

 {% headlines foo_list bar_dict baz_var "And some text" as headers "font.ttf,20,#000" %} {% headlines foo_list bar_dict baz_var "And some text" as headers "font.ttf,20,#000,all" %} {% headlines foo_list bar_dict baz_var "And some text" as headers "base" %}

この場合、二重引用符で囲まれた変数と単純な文字列、およびリストと辞書をパラメーターとして渡すことができます。出力には、{file、text、width、height}オブジェクトのヘッダーのリストがあります。

 {% for head in headers %} <img src="{{ head.file }}" alt="{{ head.text }}" width="{{ head.width }}" height="{{ head.height }}" /> {% endfor %}

以下は、例えば、ファイナルで起こり得ることです。私はデザイナーではないので、フォントを「目で」見たので、キックしないようお願いします。

したがって、クライアントにとっては、サーバーにとっては手動スライシングのように見えます。負荷は1回であり、開発者にとってはすべてがシンプルで透過的です。利益！

再び関連リンク：

シムをありがとう、私はトピックのレビューを受け入れます。

Djangoを使用したdjango-headlineまたは@ font-face

前文