Ошибка рендеринга текста в Firefox 4 - PullRequest
Новая
       25

Ошибка рендеринга текста в Firefox 4

3 голосов
/ 03 июня 2011

Я столкнулся с ошибкой в ​​моем приложении, связанной с несогласованным отображением текста между Chrome и Firefox 4.

Chrome сообщает, что определенная строка текста имеет ширину 215 пикселей, тогда как Firefox 4 сообщает мнеего ширина 218 пикселей:

Chrome vs Firefox Text Rendering

Бит поиска указывает , что проблема в Firefox 4, а не в Chrome.

Следующий кодотображает текст на элементе canvas, а также с помощью HTML и выводит ширину: 

<html>
  <head>
    <title>Firefox 4 Text Rendering Bug</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "bold 16pt Helvetica"
          ctx.fillText("MORE INFORMATION", 0, 16)
          alert(ctx.measureText("MORE INFORMATION").width); 
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      h2 {font-size: 16pt; font-family: Helvetica; font-weight: bold }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="220" height="20"></canvas>
    <h2>MORE INFORMATION</h2>
  </body>
</html>

Существует ли способ согласованного отображения текста между браузерами?

Ответы [ 2 ]

4 голосов
/ 03 июня 2011

Есть ли способ последовательно отображать текст между браузерами?

Краткий ответ: Нет. Не с fillText.

Длинный ответ: На самом деле он будет отличаться в разных операционных системах и в разных настройках ОС. И это не ошибка в Firefox, как таковая. Во всяком случае, FF4 является наиболее последовательным.

Для Chrome 13.0.782.1, Safari 5 и Opera 11 я получаю 211

Для IE9 я получаю 220

Для FF4 я получаю 218

Это особенно касается шрифта, подобного Helvetica , который есть не у каждого пользователя. Большинство пользователей Windows вместо этого имеют Arial и т. Д.

Смотрите вчерашний пост здесь о некоторых текущих проблемах с fillText. Лучшее, что вы получите с fillText, - это использование веб-безопасного шрифта без курсива и полужирного шрифта, а также тестирование, чтобы убедиться, что оно достаточно стабильно для ваших браузеров, на которые вы ориентируетесь.

Технически правильный, но слабый ответ: Да, есть способ последовательно отображать текст. Сделайте PNG и визуализируйте изображение в разных браузерах. В противном случае вам просто нужно найти шрифт, который работает наиболее близко во всех браузерах.

0 голосов
/ 06 июня 2011

Саймон правильно ответил на вопрос: текст отображается по-разному в разных браузерах, и нет простого решения для его стандартизации.

Мое приложение сильно зависит от правильного измерения ширины, поэтому, чтобы учесть несоответствие, я теперь переоцениваю ширину текста на 5%, что в моих тестах служит хорошей верхней границей для ширины для всех браузеры.

...