Using the same CSS values as in the Figma design, produces different values-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Using the same CSS values as in the Figma design, produces different values

P粉642919823 2023-09-06 18:59:32

458

I'm trying to implement Figma's design, but noticed it's not always accurate:

This is the input field I want to create:

Please note how thin the text is. These are the values from Figma:

color: var(--heading-black, #222); /* Button/16/Regular */ font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px;

I also used the same color and font weight, I even tried using 100 instead of 400, but my result was:

My text is thicker, I don't know why. Here is the CSS code for my input field:

.search-field { margin-left: 65px; width: 429px; height: 44px; font-size: 16px; font-weight: 400; padding-left: 46px; background: url("../../../assets/icons/search.png") no-repeat; background-color: white; background-size: 21px; background-position: 14px center; border: none; border-radius: 4px; outline: none; color: #222; }

and html:

What did i do wrong?

P粉642919823

reply all (2)

P粉3005417982023-09-07 17:54:16 2 floor

If you get the same result even if you change the font weight value, it means you have one of the following issues:

Your font does not have or has not been imported with the required weight value (for example: you want 100, but the closest value contained in the @font font is 400);
Check that no other rules will not override it;

One last thing, in this case you want to change the appearance of the placeholder, so you have to use pseudo-element ::placeholder so you can just change the style of the placeholder without risking Risk of other problems arising.

In the code, I gave the placeholders a lighter color to simulate the result.

.search-input{ box-sizing: border-box; background-color: #21A668; padding: 10px; } .search-field{ width: 429px; height: 44px; font-size: 16px; font-weight: 400; padding: 0 10px 0 46px; background: url("../../../assets/icons/search.png") no-repeat; background-color: white; background-size: 21px; border: none; border-radius: 4px; outline: none; color: #222; } .search-field::placeholder{ color: #bdbdbd; }

Like+0

Add Reply

P粉0424552502023-09-07 14:35:37 1 floor

Try adding thefont-familyattribute and its value in the selector, and use the cdn I'm using here since it embeds all available font weights.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); .search-field{font-family: 'Inter', sans-serif;}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); body{ background: green; } .search-field { margin-left: 65px; width: 429px; height: 44px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; padding-left: 46px; background: url("../../../assets/icons/search.png") no-repeat; background-color: white; background-size: 21px; background-position: 14px center; border: none; border-radius: 4px; outline: none; color: #222; }

Like+0

Add Reply