問題タブ [letter-spacing]

質問はそれをほとんどすべて言っています。私は周りを探していて、それが不可能だと心配し始めました。

テキストを描画するこのcanvas要素があります。letter-spacingCSS属性と同様に文字間隔を設定したい。つまり、文字列を描画するときに文字間のピクセル数を増やすことを意味します。

テキストを描画するための私のコードはそのようなものです。ctxはキャンバスコンテキスト変数です。

ctx.letterSpacing = "2px";図面の前に追加しようとしましたが、役に立ちませんでした。簡単な設定でこれを行う方法はありますか、それとも間隔を考慮して各文字を個別に描画する関数を作成する必要がありますか？

これが私の問題です。サイト プロジェクトで「PT Sans Narrow」と呼ばれる Google Webfont を使用する。はじめに、FFとIEはそれを完璧に示しています。Webkit ブラウザーは少し別の話ですが、フォントは正しく読み込まれますが、「文字間隔: -.05em」と組み合わせると、カーニングなしの Web フォントが表示される短いテキスト読み込みが表示されます。数分の 1 秒後、正しくカーニングされた最終的な外観に更新されます。何よりも「スリングショット」効果として説明できます-それが理にかなっている場合は?

.wf-loading スクリプトを使用して、FOUT がないことを確認しています。

これは私のCSSです

HTMLで必要な場所で「sansNarrow」クラスを呼び出しているだけです

私の質問は、他の誰かがこの問題を抱えていて、実行可能な修正が見つかったのですか?

ページロード後 300 ミリ秒後に「.sansNarrow」を表示/フェードインする jquery 関数を作成しようとしましたが、元のクラスを「display: none」に設定することに依存しており、JS がオフになっている場合は実行可能なオプションではありません.

前もって感謝します！

Google Webfonts の Dosis フォントを使用して ...

Firefox と Safari で広範なテストを行った後、両方のブラウザーですべてを完全にピクセル単位で完全に表示することはできないことを完全に認識していましたが、Photoshop の元のデザイン ビューと同じように正確に表示されますが、最も厄介な問題に遭遇しました。

文字間隔

何を試しても、Webkit ブラウザーで文字間隔を正しく設定できません。

簡単な例:

これは、Firefox で、私が望むように完全にうまくレンダリングされます (FF を 15.5px のフォント サイズにハックすると、[だれかが反対しない限り] 大丈夫です)。

ただし、Safari では文字間隔は機能しません。

いくつかの調査の結果、1px未満の文字間隔は許可されないことがわかりましたが、emメジャーを使用すると許可されると言われています。それでいい。

私が使用する場合：

何も起こりません。変化なし。文字間隔が狭すぎる。

しかし、私が使用する場合:

突然パチンと音がして、文字間隔が広すぎます。10 単語のテキストブロックのように、幅が突然 50 ピクセルを超えます。

理解できません。

これを修正する方法を知っている人はいますか？

ありがとうございました。

私は本当にjQueryの初心者です。今日は、このかわいい種類の水平アコーディオンメニューを、テキストを入れて作成しようとしました。

これでアコーディオンが機能するようになりましたが、テキストの文字間隔をアニメーション化することも試みました。

編集： 幅のアニメーションが機能していることに注意してください。問題は、文字の間隔が-14pxにアニメーション化されず、元に戻ることです。

私はどこでも検索しましたが、解決策を見つけることができません。

これが私のjQueryコードです：

http://jsfiddle.net/d5MYS/-ライブコード

ありがとう ：）

サファリのような Webkit ブラウザが 1 ピクセルより小さい文字間隔をサポートしないという事実に苦労しています。まだ解決策はありますか？私は自分のフォントを変換し、文字間隔をその新しいフォントに直接追加することを考えていました.これは機能しますか?それをサポートするコンバーターがあれば、何かアイデアはありますか? ありがとう

私の質問はかなり技術的なものであることはわかっていますが、基本的には、次の CSS が<p>タグ内のテキストの表示にどのように影響するかを具体的に知りたいと思います。

ジョージアはプロポーショナル フォントであり、デザイナーが時間をかけて文字間のスペースを作成し、フォントをより読みやすく視覚的に魅力的なものにしていることを私は知っています。

しかし、私の質問は、文字間隔のプロパティがこの比例性にどのように影響するかです。このコードは、タイプ デザイナーによって既に定義されている間隔に 2 ピクセルを追加しますか?それとも、その間隔を 2 ピクセルにリセットしますか?

私の目的は、疑似要素のコンテンツに2つの文字を入れ、各文字の間隔を1ピクセルにすることです。

私は明白なことを試みました、それはletter-spacing1ピクセルのを割り当てています：

問題は、2つのアポストロフィが目的の間隔を取得していないことです。結果のスナップショットは次のとおりです。

そして、これが私が達成しようとしていることです：

どのようにそれを行うことができますか？

Google Web Fontsで見つけたフォントに問題があります。

以下に投稿された画像でわかるように、Firefox を使用している場合、「Versus」の大文字の V が「e」と重なっています。ただし、Chrome (または IE) を使用している場合は重複せず、2 つの文字の間に醜いスペースが残ります。

これを修正して Firefox のように見せる方法はありますか? それとも、別のフォントを探し始める必要がありますか?

私のHTML：

私のCSS：

}

前もって感謝します！

どういうわけか、私が使用しているフォントの単語間のスペースが消えました。参照： http ： //www.fantasynews.com/GoogleWebフォントを使用するように少し変更されたTwitterBootstrapを使用しています。問題のフォントは、Google Webフォントによって提供されるOswaldです： http ：//www.google.com/webfonts/specimen/Oswald そして、間隔は私にとって通常のように見えます。

私はCSSの第一人者ではありませんが、スペースの表示方法を変更するコードには何も触れていません。特にスペースをターゲットにすべきものは何も知りません。これは私が見落としているいくつかのばかげた間違いのように感じますが、私は無知です。ソースを見ると、要素を調べたときにスペースがはっきりとそこにあるだけでなく、少しのjavascriptがトリックを演じていた場合に備えて、スペースがはっきりとそこにあります。

最新バージョンのChromeを使用していますが、これはFirefoxにも表示されます。

間隔の問題は、最新のプレーヤーニュースの下にあるボックスのタイトルに特に表示されます。

raphael jsテキストで文字間隔を設定する方法はありますか？CSSで簡単に実行できますが、ラファエルで実行するにはどうすればよいですか？どんなハックもします。