Unicode different size arrows
Question
I have the following code:
.testFont { font-size: 16px; }
<!DOCTYPE HTML> <html> <head> </head> <body> <div class="outter"> <div class="testFont">▴</div> <div class="testFont">▾</div> </div> </body> </html>
The unicode table below shows that the arrows I used above should be equivalent in size (from visual inspection):
Why are they rendered differently? And how can I get equivalent arrow sizes?
Update
Tested on Chrome and Safari both render the down arrow bigger?
Output Image
2 answers
solution1
4 ACCPTED 2017-03-23 04:14:57
This is because of Lucida Grande font, which might be the default font on your system :
To avoid it, define the font to use yourself (better a webfont so you'd be sure every one will see the same, but I don't know one that does support these glyphes).
.testFont { font-size:16px; /* only tested on mac OS, if someone could lead me to default win and *nix default fonts, I'd be glad to include it */ font-family: 'Arial Unicode MS', 'Consolas'; }
<div class="outter"> <div class="testFont">▴</div> <div class="testFont">▾</div> </div>
solution2
0 2017-03-23 03:51:19
It seems as if the arrows are the same size, I think it is an optical illusion. See fiddle with arrows output: https://jsfiddle.net/uv8yrrav/21/ I have not changed any of your code:
<body>
<div class="outter">
<div class="testFont">▴</div>
<div class="testFont">▾</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.