Dans les navigateurs shell de version basse et les navigateurs mobiles tels que 360 Extreme Speed, la police de la balise <tspan> dans svg ne peut pas être mise à l'échelle correctement, mais c'est normal dans la dernière version de Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
tspan{
display: block;
}
</style>
</head>
<body>
<p>
<svg viewBox="0,0,1000,1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text><tspan class="st5" y="55.9" x="5.5">After all the articles, ads, fliers, etc. have been prepared for the newsletter, the document should be assembled and may require </tspan></text>
</svg>
</p>
</body>
</html>
Lorsque la fenêtre est réduite, la taille de la police dans le navigateur rapide ne sera pas réduite lorsqu'elle est mise à l'échelle à 12 pixels. Cela fonctionne bien dans le dernier chrome. Si vous ouvrez l'outil de débogage 360 Extreme Speed et supprimez l'attribut display:block, la mise à l'échelle sera normale. Mais définir display:inline directement dans CSS ne fonctionne pas non plus. c'est filaire.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Définissez simplement le style text-rendering="geometricPrecision" sur le svg.