web-dev-qa-db-ja.com

ChromeでのフォントウェイトCSS遷移

取得しようとしていますfont-weight CSSを使用して「400」から「600」に正常に移行しますが、Chromeでは機能していないようです。これは既知のバグですか、それとも何か問題がありますか？

Fiddleここを確認してください

cssgoogle-chromefontscss-transitions
21
Funktr0n

フォントの太さのアニメーションは現在、ChromeおよびIE-10では多数のテストに基づいてサポートされていません。これは将来変更される可能性があります。

14
Funktr0n

問題は、フォントの太さを数値で表す場合、100の倍数にする必要があることです。400から600の間でアニメーション化するには、フォントが400から500から600（必要に応じて3つの「フレーム」）に変化し、見えません。とてもなめらか。アニメーションは、ウェイトを毎回1つ増やしません（400、401、402 ...）。ウェイトは100（400、500、600）ずつ増えます。アニメーションが2秒続いた場合、1秒後に重みが突然500になり、2秒後に重みが突然600になります。中間のバリエーションはありません。

ここで試みていることに関するさらに別の問題は、使用しているフォント（または少なくともJSFiddleのデフォルト）がfont-weight:500に何の違いもないことです。つまり、デフォルトは400です。

<p style="font-weight:400;">a - 400, normal</p>
<p style="font-weight:500;">a - 500 (no support, defaults to 400)</p>
<p style="font-weight:600;">a - 600 (bold)</p>
<p style="font-weight:650;">a - 650 (not valid, defaults to 400)</p>

http://jsfiddle.net/r4gDh/6/

通常および太字以外のフォントの数値フォントの太さ。指定された正確な重量が利用できない場合、600-900は最も近い利用可能なより暗い重量を使用し（または、何もない場合は、最も近い利用可能なより軽い重量）、100-500は最も近い利用可能なより軽い重量を使用します（または、存在しない場合） 、最も近い利用可能な暗い重み）。これは、通常と太字のみを提供するフォントの場合、100〜500が通常で、600〜900が太字であることを意味します。

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

これは基本的に、font-weightをスムーズにアニメーション化できないことを意味します。 100から900までのすべての重みをサポートしていたとしても、変更は快適ではなく、500から600までの劇的な変化があります（ここで軽量の重みを満たすより暗い重み）。

50
James Donnelly

フォントは単純なベクター画像のコレクションではありません（それがsvgフォントが使われなくなった理由です）。 Opentypeフォントには、フォントをピクセルグリッドに固定するためのあらゆる種類の魔法が含まれているため、フォントファミリーにすべての可能なウェイト値が含まれることを期待するのは現実的ではありません。

フォントは単純なベクター画像のコレクションではないため、線形にサイズ変更されることもありません。ピクセルグリッドを考慮に入れるためにバンプがあります。

このGoogleホワイトペーパーでは、現在の画面のテキストで線形サイズ変更が機能しない理由を説明しています https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit

これがブラウザがそれを試みない理由であり、それらはすべて事前に計算されたフォントの太さに依存します。

Retinaディスプレイが最も低い共通の特徴であるが、現在のフォント技術が現在の画面をターゲットにしている10年で、それは変わる可能性があります。

このMicrosoftホワイトペーパーには、いくつかの標準フォントの太さの値が記載されています http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font -Selection-Model.pdf

（しかし、それらが文書化されているからといって、実際にそれらすべてを含むフォントの数がそれほど少なくないわけではありません）

おそらく、SVGフォントといくつかのJavaScriptを使用して、必要な効果を実現できます。ただし、svgフォントはテキスト用としてはがらくたになります。

7
nim

私はフォントの太さを移行する方法について自分自身で答えを見つけるためにここに来ました、そしてそれを行うことができない（または少なくともあまりうまくいかない）と言って上記の承認された答えを読んだときがっかりしました。

フォントウェイトアニメーションが利用できないため、別のエフェクトを試してみることにしました。これにより、フォントウェイトエフェクトが実際に得られます...このタイプのトランジションではうまくいくとは思いもしませんでした。

体重を増やす方法は次のとおりです。

.weightGrow:hover {
    text-shadow:
    -1px -1px 0 #2DD785,
    1px -1px 0 #2DD785,
    -1px 1px 0 #2DD785,
    1px 1px 0 #2DD785;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

完璧にスムーズで、このページに最初に到達したときに私が探していたものとまったく同じです。それが誰かを助けることを願っています。

6
user2943492

同時にカラートランジション（ライトグレーからダークブルー）をすばやく実行して、「フォントウェイト」トランジション効果を誤って取得したようです。

4
Rolf

Font-weightをスムーズに移行させる直接的な方法はありませんが、これを間接的に行う方法を見つけました（ただし、いくつかの制限があります）。

本質的には、擬似要素の1つを単純に使用して、フォントを太字に移行する要素のミラーコピーを作成できます。擬似要素のfont-weightは太字で、不透明度は0です。疑似要素の不透明度を単純に遷移させるだけで、非常にスムーズな遷移でトリックが行われます。

ここでデモを見ることができます：
http://jsfiddle.net/r4gDh/45/

HTML：

<div class="element" data-text="text will turn to bold on hover">
  text will turn to bold on hover
</div>

HTMLでは、すでに制限の1つを確認できます。これは、疑似要素を使用しているため、要素のコンテンツも属性として渡す必要があるため、コンテンツが複製されるためです。

CSS：

.element,
.element::before {
    background: red;
    font-weight:normal;
    font-size:40px;

    text-align:center;

    display: inline-block;

    padding: 0px 30px 0px 30px;

    position: relative;
    top: 0;
    left: 0;
}
.element::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    content: attr(data-text);
    opacity: 0;

    font-weight: bold;

    transition: all 1s linear;
}
.element:hover::before {
    opacity: 1;
}

2番目の制限は、手法の性質に起因します。つまり、元の要素の上に疑似要素を単にオーバーレイしている場合、要素には無地の背景が必要です。そうでない場合、元の要素は背景に表示されたままなので、これは機能しません。

あなたが本当に注意しなければならないことの1つは、疑似要素と元の要素が同じ寸法であることです。このため、デモでは、疑似要素のパディングを削除したので、同様のことをする必要があるかもしれません。

ご覧のように、フォントの太さの切り替えを取得するこの方法には問題がないわけではなく、理想からはほど遠いですが、これは私が現在考えられる最高の方法であり、ボタンなどの限られたケースで、これは非常に便利であり、正しく行われると、レガシーブラウザでもまともな外観になります。

2
Idra

私は@Idraのフィドルを微調整して、通常から大胆への移行を少しスムーズにしました。これがフィドルです： http://jsfiddle.net/y7rLwx95/

変更点...太字になるとテキストの幅が広くなるため、文字間隔を広げることにより、最初の「ストレッチ」トランジションを追加しました。

.element:hover {
   letter-spacing: 0.9px;
   transition: all .3s linear;
}

次に、太字の:: before要素のフェードインを遅らせました：

.element:hover::before {
   opacity: 1;
   transition-delay: .2s
}

ここでいくつかの追加の調整：

.element::before {
   transition: all .3s linear;  /* replace */
   letter-spacing: 0;           /* additional */
}

移行のタイミングは、私にとって適切と思われるものです。 @Idraが投稿した最初のアイデアは私にとって重要です。幅は通常と太字で異なる必要がある必要があるという事実を受け入れます。これは、フォントの太さが異なるためです。したがって、実際の課題であるIMHOは、2つの外観をスムーズで不快な方法で切り替える方法を理解することです。これは、これまでに見つけた最良の解決策のようです。

0
Michael Chen