Когда я рисую стрелки на холсте HTML5 с помощью метода fillText, в MacOS X я получаю стрелки разной высоты, когда я рисую их отдельно.Но когда я рисую их одной линией, высота становится одинаковой.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
ctx.font = "16px Courier";
// draw two arrows as separate strings
ctx.fillText("↑", 50, 50);
ctx.fillText("↓", 60, 50);
// draw two arrows as a single string
ctx.fillText("↑↓", 50, 66);
И я получаю такой результат в Chrome:
https://i.imgur.com/rKvUXJA.png
Почему впервая линия стрелка вниз меньше?Это те же символы, я просто копирую и вставляю их.
Также в Safari стрелка вниз в обоих случаях меньше:
https://i.imgur.com/IwSelX9.png
В других ОС (проверенов Linux) высота стрелок одинакова.
https://i.imgur.com/ukbL4Dt.png