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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda mendapat hasil yang sama walaupun selepas menukar nilai berat fon, ini bermakna anda mempunyai salah satu daripada isu berikut:
- 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>Cuba tambah atribut
font-familydan 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;}