Figma デザインと同じ CSS 値を使用すると、異なる値が生成されます
P粉642919823
P粉642919823 2023-09-06 18:59:32
0
2
555

Figma の設計を実装しようとしていますが、必ずしも正確ではないことに気付きました:

これは私が作成したい入力フィールドです:

文字が薄いことに注意してください。これらは Figma からの値です:

リーリー

同じ色とフォントの太さを使用し、400 の代わりに 100 を使用してみましたが、結果は次のとおりです。

テキストが太くなっていますが、理由はわかりません。入力フィールドの CSS コードは次のとおりです:

リーリー

と html:

リーリー

私は何を間違えたのでしょうか?

P粉642919823
P粉642919823

全員に返信(2)
P粉300541798

フォントの太さの値を変更しても同じ結果が得られる場合は、次のいずれかの問題があることを意味します。

  1. フォントに必要なウェイト値がないか、インポートされていません (たとえば、100 が必要ですが、@font フォントに含まれる最も近い値は 400 です);
  2. 他のルールがそれをオーバーライドしないことを確認してください;

最後にもう 1 つ、この場合、プレースホルダーの外観を変更したいので、他の問題が発生するリスクを冒さずにプレースホルダーのスタイルを変更できるように、疑似要素 ::placeholder を使用する必要があります。

コードでは、結果をシミュレートするためにプレースホルダーに明るい色を付けました。

リーリー リーリー
いいねを押す +0
P粉042455250

セレクターに font-family 属性とその値を追加してみて、利用可能なすべてのフォントのウェイトが埋め込まれているので、ここで使用している cdn を使用してください。

リーリー

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート