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 j'essaie de créer : Remarquez à quel point le texte est fin. Voici les valeurs de Figma : color:var(--heading-black,#222);/*Button/16/Regular*/font-family:Inter;font-size:16px;font-style:normal; poids de la police : 400 ; hauteur de la ligne : 16 px ;

P粉300541798 · Answer

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 :

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) ;

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

P粉042455250 · Answer

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