Текст в SVG выглядит иначе в Chrome по сравнению с IE8 - PullRequest
Новая
       43

Текст в SVG выглядит иначе в Chrome по сравнению с IE8

0 голосов
/ 28 января 2011

Я пытаюсь стилизовать некоторый текст для домашней страницы моей компании. Текст отлично выглядит в IE8, но не очень хорошо выглядит в Firefox или Chrome.

В Firefox похоже, что есть несколько дополнительных белых пикселей справа от каждого символа. В хроме эффект похож, но не для всех букв. 

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/raphael-min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        window.onload = function () {                                                       
            var paper = Raphael(10, 0, 600, 400);

            var lbl = paper.text(135, 40, "AaEeIiOoUuYy").attr( {
                "font" : '36px Franklin Gothic Medium, Helvetica, Arial',                       
                stroke : "#000",
                fill : '#ffffff',
                'font-weight' : 'bold',
                'text-anchor' : 'start',
                'stroke-opacity' : .9               
            });
            var lbl = paper.text(0, 90, "AaEeIiOoUuYy").attr( {
                "font" : '62px Franklin Gothic Medium, Helvetica, Arial',       
                stroke : "#000",
                fill : '#ffffff',       
                'font-weight' : 'bold',             
                'text-anchor' : 'start',
                'stroke-opacity' : .9
            });
        }       
    </script>
    <style type="text/css">
        #page
        {           
            background: #000;
            width:100%;         
            height: 600px;
        } 
    </style>
</head>
<body>    
    <div id="page">   
    </div>
</body>
</html>

Вот изображения, показывающие проблему:

Firefox
IE8
Chrome

Я использую Рафаэль 1.5.2. Спасибо!

EDIT:

Я также открыт для любого другого кросс-браузерного решения, которое позволяет отображать определенный шрифт с тонким черным контуром (обводка).

Ответы [ 2 ]

1 голос
/ 28 января 2011

Если вы установите цвет обводки такой же, как и для заливки, он скроет небольшую ошибку рендеринга.

Вы должны знать, что IE использует собственный механизм рендеринга векторов, называемый VML, а не SVG.Рафаэль делает большую работу, скрывая большинство различий для вас, но не все.В рендерере VML есть ряд ошибок, худшая из которых для вашего использования в том, что IE7 будет игнорировать указанное семейство шрифтов и всегда использовать Arial.

0 голосов
/ 29 января 2011

Я закончил тем, что отказался от Рафаэля и использовал font-shadow для firefox / chrome и небольшой фильтр Glow для IE.Это исправляет мою проблему для всех основных браузеров.

...