Menggunakan nilai CSS yang sama seperti dalam reka bentuk Figma, menghasilkan nilai yang berbeza

Question

Saya cuba melaksanakan reka bentuk Figma, tetapi perasan ia tidak selalu tepat:

Ini adalah medan input yang saya ingin buat:

Sila ambil perhatian betapa nipisnya teks itu. Ini adalah nilai dari Figma:

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

Saya juga menggunakan warna dan berat fon yang sama, malah saya cuba menggunakan 100 berbanding 400, tetapi keputusan saya ialah:

Teks saya lebih tebal, saya tidak tahu mengapa. Berikut ialah kod CSS untuk medan input saya:

.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;
}

dan html:

<input type="text" class="search-field" value placeholder="Booking.com, Expedia, Otto...">

Apa salah saya?

Answer 1

Jika anda mendapat hasil yang sama walaupun selepas menukar nilai berat fon, ini bermakna anda mempunyai salah satu daripada isu berikut:

1. Fon anda tidak mempunyai atau belum diimport dengan nilai berat yang diperlukan (cth: anda mahu 100, tetapi nilai terdekat yang terkandung dalam fon @font ialah 400);
Periksa jika tiada peraturan lain yang tidak akan mengatasinya;

Satu perkara terakhir, dalam kes ini anda ingin menukar rupa pemegang tempat, jadi anda perlu menggunakan pseudo-element ::placeholder, dengan cara ini anda hanya boleh menukar gaya ruang letak tanpa mengambil risiko yang lain Risiko masalah.

Dalam kod, saya memberikan ruang letak warna yang lebih cerah untuk mensimulasikan hasilnya.

.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;
}

    <div class="search-input">
        <input type="text" class="search-field" value placeholder="Booking.com, Expedia, Otto...">
    </div>

Answer 2

Cuba tambah atribut font-family dan nilainya dalam pemilih dan gunakan cdn yang saya gunakan di sini kerana ia membenamkan semua pemberat fon yang tersedia.

@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;
}

<input type="text" class="search-field" value placeholder="Booking.com, Expedia, Otto...">