Résoudre le problème des espaces de largeur égale dans les navigateurs CSS_Experience Exchange

Mais ce n'est pas très fiable. Par exemple, si l'espacement des espaces est très grand, alors nous devons ajouter plusieurs espaces réservés, et la taille de la page deviendra très grande.

Dans le même temps, notez que la largeur dans Safari est la largeur de l'espace du caractère défini (la police par défaut de Safari est Times), ce qui signifie qu'un caractère chinois nécessite deux espaces réservés.

La situation spécifique est présentée dans l'image ci-dessous :

En fait, ce n'est pas un problème de Safari, mais un problème de police. La solution est d'utiliser les attributs suivants

font-family : '宋体' ; Définissez la police par défaut de Safari sur une police chinoise et anglaise de largeur égale, telle que "宋体" pour résoudre le problème. Pour la version Windows des paramètres de police Safari, vous devez utiliser directement un nom tel que le chinois "Songti" au lieu de "Simsun" (frères qui connaissent la raison, dites-le-moi s'il vous plaît).

Mais jusqu'à présent, notre objectif fondamental n'a pas été résolu, à savoir si nous pouvons éviter d'utiliser des espaces réservés comme et utiliser des espaces « natifs ». Considérez les propriétés CSS correspondantes pour les espaces, apprenez-en davantage sur l'utilisation des espaces et la prochaine étape sera plus facile à gérer.

Pour résumer, il existe deux conditions pour utiliser des espaces blancs afin d'obtenir des espaces de largeur égale. Les attributs correspondants doivent être définis

espace blanc : pré ;

Ensuite, définissez des caractères de même largeur (y compris les espaces de même largeur). Pour résumer, c'est tout

famille de polices : '宋体', Simsun ;
espace blanc : pré;

Étant donné que les noms CSS chinois sont utilisés, l'encodage des caractères du style doit être pris en compte lors de l'utilisation réelle. Dans le même temps, il faut également considérer si la machine Apple a "Songli" (ou d'autres polices de largeur égale). Les frères qui ont des machines Apple, veuillez aider à le tester.

--Partager--

Merci à Xiaomi d'avoir proposé une autre idée, qui consiste à utiliser des unités em. En termes simples, 1em peut être considéré comme la largeur d'un caractère ; de la même manière, .5em est un demi-caractère. La situation ci-dessus peut alors s’écrire ainsi.

Acheter宝贝：

Mon Taobao :

社Zone :

Le CSS correspondant pour

devrait être

.demi-mot {largeur : .5em;}
.deux mots{largeur :2em;}

Réussi après test.

--Partager--

Concernant les deux méthodes différentes ci-dessus, je pense personnellement qu'elles doivent être envisagées en fonction de la situation réelle. Par exemple, la première méthode, bien qu'elle repose sur une police spécifique à largeur fixe, n'ajoute pas d'autres structures supplémentaires, ce qui sera plus pratique pour la maintenance future ; la deuxième méthode prend davantage en compte la situation réelle de l'application (et n'en a pas besoin) ; (to repose sur une police spécifique à espacement fixe), mais ajoute également une structure supplémentaire.

Ainsi, en tenant compte de la maintenabilité future et en analysant d'un point de vue « sémantique », la première approche est recommandée. Dans les situations réelles de candidature, lorsque la candidature doit être plus compliquée, les individus choisiront la seconde.