0

tl; dr:現在、Sassには、ImageMagickで生成された画像を取得して画像フォルダーに入れ、その幅と高さを自動的に指定する、このようなことを行うものはありますか?

h2.anthony {
    /* image replacement CSS here */
    @magick-image: "convert -fill blue -font Candice -pointsize 72 label:Anthony header-anthony.png";
}

(ImageMagickコマンドはこの例に基づいています:http://www.imagemagick.org/Usage/text/#label

結果のCSS:

h2.anthony {
    /* image replacement CSS here */
    background: url(img/header-anthony.png) no-repeat;
    width: 275px;
    height: 79px;
}

サイトは中国語であり、中国語のフォントは巨大であるため、Webフォント、Cufon、sIFRなどではなく画像を使用する必要があります。

裏話:

私は多くのページに非常に多くのテキストがある新しいウェブサイトに取り組んでおり、それらのヘッダーテキストはグラデーション効果のある特定のフォントで表示する必要があります。

現在、CSSスプライトを使用して、必要な効果を持つすべてのヘッダーテキストを同じ画像に配置した場合でも、各行の幅を測定して、手動でスタイルシートに入力する必要があります。ページが追加または削除されたり、テキストの最長行の長さが変更されたりすると、さらに面倒になります。

これを自動化する方法を探しています。1つのコマンドで各ヘッダー画像を生成できるようにImageMagickで効果を再現する方法をすでに理解しましたが、それでも画像の幅を自分で測定する必要があります。

4

1 に答える 1

2

たまたま、ImageMagick を使用できる Compass 拡張機能があります。使ったことはありませんが、面白そうです。

https://github.com/StanAngeloff/compass-magick

于 2013-01-12T19:16:07.663 に答える