web-dev-qa-db-ja.com

cssの点線のテキスト？

Cssで点線のテキストを作成することは可能ですか？

ドットフォントを使用するのは当然のことですが、ドットテキストを控えめに使用する必要がある場合は、ユーザーにフォント全体をダウンロードさせるのはやり過ぎかもしれません。

私が持っていたアイデアは、白い背景の小さな透明な円の背景パターンを持つ疑似要素でテキストをオーバーレイすることでした。

このようなもの：

<div class="dottedText">Some dotted text</div>

enter image description here

[〜＃〜]フィドル[〜＃〜]

CSS

.dottedText:after
{
    content: '';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, transparent 50%),
    radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
    background-size:4px 4px;
}

私は近いかもしれないと思いますが、フォントサイズを変更すると上記の解決策は正しく機能しません。

私は解決策を探しています

1）フォントサイズが大きくなると、ドットのサイズが大きくなります。

2）できれば、各文字は1行のドットのみで表示する必要があります。現在のように2行ではありません。

編集：私がドットの1つの線を言うとき-私は各ストロークが1つのドットだけで構成されるべきであることを意味します。例：上の画像では、「m」文字に2列のドットがあることに注意してください。..まあ、私は1つだけを好みます。

理想的にはこのようなもの（ ここ から取得）：

enter image description here

（わかりませんが、これを行うには放射状のグラデーションを微調整する必要があるかもしれません）

編集：

1）組み込みフォントである限り、どのフォントを使用してもかまいません。 （モノスペースフォントでも問題ありません）

2）ソリューションはすべてのブラウザで機能する必要はありません。 （したがって、Webkitのみのソリューションで問題ありません）

cssfontsradial-gradients
34
Danield

正直なところ、この答えはおかしなことや奇妙に聞こえるかもしれませんが、CSSのみで可能かどうかはわかりません（他の言語にタグを付けていないため）そうするのはやり過ぎなので、CSSの行を多すぎる代わりに、ドットフォントを使用するのが理にかなっています。

IEを除外しても、.woffファイルは1つしかありません。これは、httpリクエストが1つ増えるため、非常に正常だと思います。確実に肥大化することはありません。あなたが思うように。

かっこいい点線のフォントのリストは ここ にあります。 Font Squirrel Service を使用して、ttfを変換します。

あなたがそうする許可を持っていることを確認してください。

デモ 使用されるフォント： ドットライン

（ファイルは自分のサーバーでホストされ、有効になっています [〜＃〜] cors [〜＃〜] Firefoxでデモが失敗したため）

安っぽいIEをサポートするつもりがない場合、必要なファイルはwoffだけで、それはたった23kbです。

19
Mr. Alien

SVGインラインスタイルに依存している場合でも、私が付属しているものは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg"
 width="1450px" height="300px" viewBox="0 0 800 300">

   <text x="2" y="155" 
    font-family="'Lucida Grande', sans-serif" 
    font-size="222"
    stroke="red"
    stroke-width="3"
    stroke-linecap="round"
    stroke-dasharray="5,5"
    fill="none">
             Some dotted text
</text>

いくつかの理由でストロークラインキャップが機能していませんが。

動作するフィドルチェックで遊びたい場合 this 。

EDIT-1（svg-stylesをCSSに移動）

    svg{ 
        width:1450px;
        height:300;
        viewBox:0 0 1500 300;
      
    }
    text{
      font-family:'Lucida Grande', sans-serif;
      font-size:152px;
      stroke:#000ece;
      stroke-width:3px;
      stroke-linecap:round;
      stroke-dasharray:1,1;
      fill:none;
    
    }
<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">

  <text  x="2" y="155" >
        

    Some dotted text

  </text></div>
7
maioman

いくつかの小さな調整で、かなり近づくことができます：

1）font-familyをcouriernewに変更します

2）divに水平および垂直オフセットを使用してtext-shadowを追加します

3）単位をemsに変更しました @ BDawgが提案したように）

---（[〜＃〜]フィドル[〜＃〜]

div {
  font-size: 40px;
  font-family: courier new;
  position: relative;
  text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
  background-size: .1em .1em;
}
div + div {
  font-size: 60px;
}
div + div + div {
  font-size: 80px;
}
div + div + div + div {
  font-size: 100px;
}
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
3
Danield

短い答え：

いいえ、できません。

tl; dr;

私は解決策を探しています

1）フォントサイズが大きくなると、ドットのサイズが大きくなります。

2）できれば、各文字は1行のドットのみで表示する必要があります。現在のように2行ではありません。

編集：私がドットの1つの線を言うとき-私は各ストロークが1つのドットだけで構成されるべきであることを意味します。例：上の画像では、「m」文字に2列のドットがあることに注意してください。..まあ、私は1つだけを好みます。

これはカスタムフォントなしでは実行できません。

他の回避策には2つの固有の問題があります：

  1. CSSにはtext-fill-patternはありません。 SVGでもありません。 CSSとSVGの両方にtext-fill-colorがあります。ただし、CSSでのブラウザ固有の実装と非標準のベンダープレフィックスに限定されています。次に、strokeスタイルがあります。 CSSには（fillと同じ）非標準の制限があり、widthとcolorのみに制限されています。 SVGはstroke-linecapとstroke-dasharrayを追加しますが、それだけです。

  2. text-outlineが役に立った可能性があります。 borderのように機能する場合は、text-outline: Npx dotted red;を実行できたはずです。そして、Npxを増やして、text-fillを事実上排除します。ただし、これには他にも問題があります。（1）仕様によると、shadowとして機能します。つまり、スタイルはありません。 text-outline: 2px 2px #f00;のように。 solid / dotted / dashedスタイルのオプションはありません。 （2）W3Cは、この機能は危険にさらされており、仕様から削除される可能性があると述べています。 （3）現時点では、まだどのブラウザにも実装されていません。参照： http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline

  3. 省略される唯一の方法は、backgroundパターンを使用してから、テキストに対してclipにすることです。これはあなたがあなたの質問ですでに試したことです。

最後のアプローチ（背景）の問題は、フォントが同じではないことです。似ていない。グリフは異なります。アセンダーとディセンダーは異なります。同じキャラクターのストロークでも違います。

これは、次の図で理解できます。

enter image description here

上記のサンプル（Times New Romanフォント）の文字に気付いた場合、垂直線の幅はほぼ同じですが、水平線（「e」の水平バー）は狭くなっています。さらに、セリフも幅が異なり、端に向かって先細になっています。パターンのある背景（メカニズム、画像、SVG、ラジアル）を適用すると、フォントの線ときれいに整列しません。空白とプロポーショナルフォントのため、距離はさまざまです。

上の図の2つのtが赤でマークされていることに注意してください。グリフは同じですが、原点からの距離によっては、背景の模様がきれいに並んでいません。したがって、2番目のtにはドットが並んでいますが、最初のtにはありません。見える模様が一部ずれているため、余白が目立ちます。同じパターンシフトが文字間でランダムに発生します。

上の図の赤い円でマークされているように、セリフのテーパーとeのテーパーに注意してください。中央では、フォントが太く、パターンからより多くのドットに対応しています（一部は完全、一部は部分的）。セリフとテーパーでは、幅が狭くなり、パターンが収まりません。曲線の場合、パターン内のドットは曲がることができず、結局のところグリッドパターンです。

フォントに合わせてパターン内の個々のドットを増減することはできません。また、すべてのキャラクターで背景をラインナップにシフトすることはできません。 mono-spaceフォントを使用すると、比例距離の問題はある程度軽減されますが、曲線は残り、パターンをそれに合わせることができません。

したがって、このためのbackground手法には本質的に欠陥があります。唯一の解決策は、カスタムフォントを使用することです。

ただし、近似が十分に適切である場合は、放射状の背景の独自の手法が適切に機能します。少なくともFirefoxを除けば、独自の手法は他のブラウザでも機能します。

また、もう1つの同様のソリューションを提供しようとします。 SVGパターンをbackground-imageと組み合わせ、background-sizeをパーセントで維持すると、より大きなサイズのmonospaceフォントである程度機能する場合があります。

免責事項：このスニペットはWebkitベースのブラウザー（Chrome/Safari）でのみ機能します。他のブラウザーはSVGをbackground-imageとしてサポートしていないようであり、-webkit-background-clip: text;もWebkitに依存しているためです。

スニペット：

.dotted {
    padding: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
    font-family: sans-serif;
    font-weight: 300;
    font-size: 32px; background-size: 0.9%;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px;  }
div:nth-of-type(3) { font-size: 80px;  }
<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>
2
Abhitalks

変更 background-sizeemsを使用します。

例えば：

background-size: 0.1em 0.1em;

注：上記の変更により、最初の例のサイズがフォントで変更されますが、2番目の例は作成されません。その正確な効果が絶対に必要な場合は、純粋なCSSアプローチではなくインラインSVGを使用します。 （またはより明白なアプローチ：点線のフォントに変更します）

2
BDawg

このフォントにwebfontキットを使用できませんか？

http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

あなたが望むフォントタイプのためにあなたのCSSをそのようにリンクするだけです：

_@font-face {
    font-family: 'bpdotsbold';
    src: url('BPdotsBold-webfont.eot');
    src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('BPdotsBold-webfont.woff') format('woff'),
         url('BPdotsBold-webfont.ttf') format('truetype'),
         url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
_

次に、このフォントを使用する要素をリンクするだけです。

_h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}
_

必ずウェブフォントのパスをサーバーにアップロードし、CSSの各url('LINKTOFONT')を更新してください。

Font-squirrelが提供しなければならない他のいくつかのDotlikeフォントがありました：

http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

2
Mark Busnelli Jr

このフォントはあなたが期待しているものに似ています

http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y

そしてそれはすべてのブラウザでサポートされている4つの拡張機能[TTF、EOT、WOFF、SVG）フォントを持っています

これがお役に立てば幸いです

1
Naveen Kumar PG