32

font-weightCSS を使用して「400」から「600」に適切に移行しようとしていますが、Chrome では機能していないようです。これは既知のバグですか、それとも何か間違っていますか?

例については、ここでフィドルを確認してください

4

8 に答える 8

61

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

ここで試みていることのさらなる問題は、使用しているフォント (または少なくとも JSFiddle のデフォルト) にfont-weight:500.

<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 の間で劇的な変化が生じます (軽いウェイトと暗いウェイトが出会う場所)。

于 2013-05-18T23:19:02.280 に答える
21

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

于 2013-05-19T02:30:59.333 に答える
9

フォントは単純なベクター画像のコレクションではありません (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 フォントはテキストでの使用には適していません。

于 2014-05-23T13:38:19.047 に答える
5

同時に、色の変化 (ライト グレーからダーク ブルー) をすばやく行うことで、誤って "font-weight" トランジション効果を得たようです。

于 2014-01-20T02:49:56.657 に答える
3

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

本質的には、疑似要素のフォントの重みが太字で不透明度が 0 の場合、フォントを太字に移行したい要素のミラー コピーを作成するために、疑似要素の 1 つを使用するだけです。疑似要素の不透明度を単に遷移させるだけで、非常にスムーズな遷移でトリックが実行されます。

ここでデモを見ることができます:
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 つは、疑似要素と元の要素が同じサイズであることです。この目的のために、デモでは、疑似要素のパディングを削除したので、似たようなことをする必要があるかもしれません。 .

ご覧のとおり、フォントの太さの遷移を取得するこの方法には問題がないわけではなく、理想とはかけ離れていますが、これは私が現在考えることができる最良のものであり、ボタンのような限られたケースでは非常に便利です。正しく行うと、従来のブラウザーでも適切に表示されます。

于 2015-06-29T12:15:01.603 に答える
2

@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 が投稿した元のアイデアは、私にとって重要です。通常と太字では幅が異なるという事実を受け入れます。これは、異なるフォントの太さの意図であるためです。したがって、実際の課題は、私見ですが、2つのルックスの間をスムーズに、不快な方法で移動する方法を理解することです. これは、これまでのところ私が見つけた最良の解決策のようです。

于 2018-06-26T15:09:36.277 に答える
1

100 刻みに制限されていないバリアブル フォントを使用すると、スムーズなフォント ウェイトの遷移とアニメーションが可能です。バリアブル フォントの詳細については、https ://web.dev/variable-fonts/ を参照してください。

たとえば、このスニペットを試してください。https://fonts.google.com/specimen/Raleway

@font-face {
  font-family: 'Raleway Flex';
  src: url('Raleway-VariableFont_wght.ttf');
  font-weight: 100 900;
}

h1 {
  font-family: 'Raleway Flex', sans-serif;
  animation: example 1s linear 0s infinite alternate both;
}

@keyframes example {
  from {
    font-weight: 100;
  }
  to {
    font-weight: 900;
  }
}
<h1>HELLO</h1>
<p>I look way smoother if you use a variable font.</p>

于 2021-04-12T15:02:58.857 に答える