1

アウトラインのみのフォントがあります。塗りつぶしの色はありません。ここでは、このfoneを見ることができます。

http://www.dafont.com/comica-bd.font

このフォントを自分の Web ページ (fontface) で使用しています。フォントの色を変えると輪郭が変わってしまいます。CSSを使用して塗りつぶしの色を変更する方法はありますか? それとも、画像を使用する最後のオプションですか?

これは私が欲しいものです: これが私がやりたいことです

これは、CSS と fontface でできることです。 ここに画像の説明を入力

背景などを塗りつぶす CSS プロパティ。

4

2 に答える 2

2

いいえ、css でフォントを埋める方法はありません。空白は、CSS の目的でフォントの一部と見なすことはできません。

于 2012-10-10T16:46:34.550 に答える
0

**編集-私は他のブラウザでこれをチェックしていませんでした。これはかなり大まかな実装です。このようなことはお勧めしません。**

このソリューションはHTML5、CSS3を使用しているため、いくつかのブラウザーサポート条件があります。

このcodepenhttp : //codepen.io/keithwyland/pen/tbfcEを参照してください（codepenが機能しない場合は以下のコード）

私はGoogleWebFont Jacques Francois Shadow（http://www.google.com/webfonts）を使用しましたが、これは姉妹フォントのJacquesFrancoisです。基本的に、シャドウフォントには、使用しているようなアウトラインフォントがあります。他のフォントは同じですが、アウトラインではなく、塗りつぶされています。

私がしたことは、要素のテキストを繰り返すようにdata-attributeを設定し、それをCSSで使用することでした。また、疑似要素を使用して、そのデータ属性の値を吐き出します。完全ではありませんが（ほとんどの場合、間隔）、2番目のフォントが元のフォントとまったく同じ文字幅を持ち、アウトラインの代わりに入力するだけでよい場合に役立ちます。

CSS

@import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);

body {
    background-color: red;
    font-family: 'Jacques Francois Shadow', cursive;
    color: #000;
    font-weight: bold;
}

h1 {
    position: relative;
    word-spacing: 2px;
    font-size: 300%;
  z-index: 1;
}

h1:after {
    font-family: 'Jacques Francois', cursive;
    content: attr(data-ttl);
    position: absolute;
    color: blue;
    top: 0;
    left: 0;
  letter-spacing: 0.06em;
    word-spacing: -0.055em;
  text-shadow:  1px 0 blue;
  z-index: -1;
}

p {
  font-size: 300%;
}

HTML

<h1 data-ttl="Stuff with fill">Stuff with fill</h1>
<p>No fill</p>
于 2012-10-10T17:39:35.900 に答える