Хромированный шрифт SVG на <canvas> со случайными символами

Я немного работаю с холстом html5, и хочу визуализировать текст с помощью шрифта SVG с помощью CSS @ font-face. К сожалению, Chrome, похоже, отображает шрифты SVG на холсте как случайные странные символы. Использование других типов шрифтов на самом деле не является вариантом, так как они очень плохо сглажены.Хромированный шрифт SVG на <canvas> со случайными символами

var context = $('canvas')[0].getContext("2d"); 

context.fillStyle = '#333333'; 
context.font = "20px Chela_One"; 
context.textBaseline = 'top'; 
context.textAlign = 'left'; 
context.fillText('Sample Text', 0, 0);

Я создал скрипку, чтобы продемонстрировать это: http://jsfiddle.net/9t6Kf/7/

В Safari (также WebKit) на холст SVG шрифты работают отлично. Кажется, это хром. Кто-нибудь знает что-нибудь об этой странности?

EDIT

Если текст выглядит нормально, хит запустить снова, как это не может быть загружен шрифт, так что это будет просто использовать Times New.

источник

2013-05-17 jcvandan

Похож на ошибку в Chrome. В индексах глифов есть одна ошибка.

См http://jsfiddle.net/eUyr6/

ABC

визуализируется как

BCD

Я представил отчет об ошибке в дэвов Chrome.

источник

2013-05-20 19:25:33

Не могу поверить, что я не заметил, что это был один персонаж! Дело в том, что это вообще не использование шрифта, хотя это своего рода рендеринг. – jcvandan

Считайте это? У меня такая же проблема с другим шрифтом. – Bodman

Сам столкнулся с этой проблемой. Заметил, что если вы импортируете шрифты Woff-формата, Chrome будет корректно отображать глифы/текст. Я не наблюдал ухудшенного сглаживания таким образом, но YMMV.

@font-face { 
    font-family: "Open Sans"; 
    src: url("../css/fonts/opensans_regular.eot"); 
    src: url("../css/fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), 
    url("../css/fonts/opensans-regular.woff") format("woff"), 
    url("../css/fonts/opensans-regular.svg#opensansregular") format("svg"), 
    url("../css/fonts/opensans-regular.ttf") format("truetype"); 
    font-weight: 400; 
    font-style: normal; 
}

Просто поместите объявление woff на линию над svg-dito.

Cheers!

источник

2013-05-22 18:06:40 kunambi

Хромированный шрифт SVG на <canvas> со случайными символами

ответ

Смежные вопросы