問題タブ [letter-spacing]

CSSを使用して、各行の文字間隔を使用して定義された幅に単語を自動的に揃える方法はありますか？

たとえば、「このようなもの」は、次のようになります。

そのようなスタイルを私のテキストに適用するための目立たない方法はありますか？純粋なCSSにはこのオプションがないと思います（少なくとも3より前のCSSバージョンでは、CSS3にはtext-justifyプロパティがあるようですが、まだ十分にサポートされていません）。したがって、jsソリューションでも問題ありません。

いくつかの非標準の Web フォント (ライセンスを持っています) があり、そのフォントの .otf バージョンを受け取りました。フォントを Web 形式に変換するオンライン ツールがいくつかあり、CSS を使用してフォントを含めることができます。

ただし、さまざまなブラウザーでテキストを表示すると、レンダリングされたテキストは広く/小さくなり、単語の間隔も異なります。フォントがさまざまなブラウザーで実際に使用されていること、およびすべてが正常に機能することを確認するためにテストしました。

そこにすべてのブラウザをサポートするために必要な4つのフォントファイルがあり、各ファイルには、使用されるフォントサイズごとに独自の文字間隔と単語間隔が継承されているようです.

ここに include ステートメントを表示したい場合は、次のとおりです。

この問題に対処する最善の方法は、同じ単語間隔と文字間隔でさまざまな形式のフォントを生成することだと思いますが、それを達成する方法がわかりません。

フォントは内部的にグリプス幅として EM を使用します。したがって、ドキュメントの font-size を何らかの値に設定し、それに応じて使用するフォントをスケーリングしてから、フォントを使用する各要素の font-size を設定することは理にかなっています。

また、@font-face 定義で文字間隔と単語間隔を設定しても効果はありません。設定されるのはフォント自体の間隔の調整だからです。

生成された各フォントの単語と文字の間隔が同じフォントジェネレーターを知っている人はいますか? または、他の解決策/提案がありますか?

2 つのフォント ジェネレーターを試しましたが、覚えているのは最後の 1 つだけです。 http://www.fontsquirrel.com/fontface/generator

また、そのフォントですべての言語 (utf-8 文字) を印刷できるかどうかをテストする方法を知っている人はいますか? utf-8文字をたくさん印刷して表示できるかどうかを確認しようとしましたが、もちろんすべての言語を知っているわけではないので、大丈夫かどうかわかりません。

ありがとう ：）

編集：

私が使用しているさまざまなブラウザがどのようにフォントをレンダリングするかのプリントスクリーンを作成しました

http://www.imagedump.nl/img9/8589/15fonts.png

使用されたCSS：

私が探しているのは、すべてのブラウザが同じフォントをレンダリングするデフォルトの開始位置を持つことです

ff のようなブラウザは、生成された異なるフォント ファイルを使用する ie のようなブラウザとは異なるテキストをレンダリングします。しかし、同じ生成されたフォント ファイル (woff) を両方とも使用している場合、chrome と ff には違いがあります。

FF (3x、4x)、Chrome、IE (6、7、8) で正常にレンダリングされるページがあります。

IE9 でテストすると、テキストはより広くなります。問題を調査したところ、テキストは実際には他のブラウザよりも文字が大きく表示されているようです。

文字間隔を -0.6px に変更すると、テキストは他のブラウザと同様に正常にレンダリングされました。また、レンダリングモードを「互換表示」に変更すると、ページは問題なく表示されます。

レンダリング モードが変更された原因を知っていますか?

条件付きコメントを使用して問題を「解決」しましたが、あまり満足していません

問題を解決する他の方法はありますか?

編集

さまざまなマシンとさまざまなブラウザーでいくつかのスクリーンショットを作成しました。結果はここで確認できます

ご覧のとおり、ブラウザが異なるマシンでも結果は同じです。レンダリングが異なるのは、標準モードの IE9 だけです。ソースページは

いくつかのテキストを含む垂直に回転したスパン要素があります：

コンテナの高さに応じてスパンからのテキストの文字間の間隔が変化するようにするにはどうすればよいですか？基本的に、テキストを要素の高さ全体にまたがらせたいです...

JTextPaneの文字間隔（フォントトラッキング）を変更する必要がありますが、機能させることができません。

JTextAreaを使用している場合、次のことができます。

ただし、行間隔を変更する必要があるため、JTextPaneを使用して次のことを行う必要があります。

JTextAreaで行ったように機能しません。私が試したもう一つのことは：

ただし、追跡属性は機能しません。

私は何が間違っているのですか？

やあみんな..それが聞こえる通りに。

現在、@ fontface、lettering.js、kern.jsを使用して、この単語を美しくスケーラブルにしています。

それをすべてやって、上にかなりのグラデーションを投げたいと思います。

ありがとう！

幅が固定されているdivのですが、中のテキスト（誰かの名前）は異なります。テキストを動的にサイズ変更/文字間隔して、完全に収まるようにする方法はありdivますか？

ただし、このスクリプトはJavaScriptを読み取らないHTML-PDFコンバーターで使用されるため、JavaScriptを使用できません。

text-align:justifyテキストがdivに対して長すぎるかのように機能せず、サイズ変更されません。text-align:justify段落などの作品しか見つかりません。

名前を2行にすることはできません

適切な間隔を確保しようとしている Web フォントがあります。文字間隔: .03px に設定しました。Firefox 5 では問題なく動作しますが、これがブラウザー間で動作しないことはわかっています。これを助けるために私ができることはありますか？または、これはどのブラウザで動作しますか？

ユーザーがテキストを読みやすくする必要があるため、1 px の文字間隔を使用しましたが、見栄えが悪いので、0.5 px の半分のピクセルを使用すると思っていましたが、動作しません。em 属性を使用してみましたが、タスクを達成できませんでした。

文字間隔を半分のピクセルにする方法はありますか（可能であればクロスブラウザソリューション）

固定ディスプレイを試みることは、通常、Web デザインでは禁止事項であることは承知していますが、聞いてください!

私が運営しているフォーラムにホワイトボードのような追加機能を開発しています。簡単に言うと、ユーザーは通常のようにテキストと bbcode を使用して投稿を入力し、そのテキストの上に管理されたキャンバスを挿入し、マウスでその上に落書きし、送信をクリックすると、落書きが表示されるというものです。投稿の上に表示されます。サーバーは画像を透明な背景の png に処理し、テキストに適切に配置します。

したがって、実際には、バックエンド処理とフロントエンド インターフェイスがすべてうまく連携しています。あとは、処理された Doodle がテキストの上に配置される表示のみです。そして、これが機能するためには、テキスト上の画像の位置合わせがかなり正確である必要があります。たとえば、ユーザーが単語を丸で囲んだり、取り消し線を引いたりして、テキストが別のユーザーに対して同じようにレンダリングされない場合、最終結果は間違ったものになります。したがって、テキスト表示をロックダウンする必要があると考えています。今のところすべてがかなり流動的であるため、これはちょっと面倒ですが、ねえ、これはかなりクールな機能になるでしょう? それで、ポストディスプレイボックスの幅を修正しましたが、フォントをどうするか、つまりサイズ、フェイス、文字間隔、行間隔を設定する方法について困惑しています。

誰にもアイデアはありますか？それが役に立てば、私はIEやモバイルディスプレイにはまったく関心がありません...