En utilisant les mêmes valeurs CSS que dans la conception Figma, produit des valeurs différentes

Question

J'essaie d'implémenter le design de Figma, mais j'ai remarqué qu'il n'est pas toujours précis :

Voici le champ de saisie que je souhaite créer :

Veuillez noter à quel point le texte est fin. Ce sont les valeurs de Figma :

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

J'ai également utilisé la même couleur et la même épaisseur de police, j'ai même essayé d'en utiliser 100 au lieu de 400, mais mon résultat était :

Mon texte est plus épais, je ne sais pas pourquoi. Voici le code CSS de mon champ de saisie :

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

et html :

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

Qu'est-ce que j'ai fait de mal ?

Answer 1

Si vous obtenez le même résultat même après avoir modifié la valeur d'épaisseur de la police, cela signifie que vous rencontrez l'un des problèmes suivants :

1. Votre police n'a pas ou n'a pas été importée avec la valeur de poids requise (ex : vous voulez 100, mais la valeur la plus proche contenue dans la police @font est 400) ;
Vérifiez si aucune autre règle ne l'annulera ;

Une dernière chose, dans ce cas vous souhaitez changer l'apparence de l'espace réservé, vous devez donc utiliser un pseudo-élément ::placeholder, de cette façon vous ne pouvez changer que le style de l'espace réservé sans risquer d'autres risques de problèmes.

Dans le code, j'ai donné aux espaces réservés une couleur plus claire pour simuler le résultat.

.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

Essayez d'ajouter l'attribut font-family et sa valeur dans le sélecteur et utilisez le cdn que j'utilise ici car il intègre toutes les épaisseurs de police disponibles.

@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...">