&застенчивый; (мягкий дефис) и Chrome и Safari
У меня есть веб-сайт, на котором я бы предпочел использовать ; (мягкий дефис) разбивать слова так, как я хочу.
Нажмите здесь для скриншота из Chrome
Проблемные компьютеры работают под управлением OS X (несколько версий), и проблема возникает как в Chrome, так и в Safari (несколько версий). Компьютеры с точно такой же ОС и версией браузера могут показывать это по-разному. Снимок экрана сделан на OS 10.8 с Chrome v. 21.0.1180.75.
Похоже, работает мягкий дефис, потому что он разделяет слово и вставляет дефис "-", но он также создает этот прямоугольник с крестом.
Сайт использует @fontface, если это имеет какое-либо отношение к нему.
Спасибо!
3 ответа
Особенно с учетом вашего сайта со шрифтовым тестом, кажется, что проблема вызвана двумя факторами: некоторые браузеры WebKit в OS X - ошибка, из-за которой они отображают символ мягкого дефиса внутри строки текста, используя вместо него глиф, вместо того, чтобы рассматривать его как управляющий персонаж; и шрифт StagSansWeb либо не имеет глифа для него (заставляя браузеры использовать фиктивный глиф), либо имеет странный глиф для него. Если эти браузеры дополнительно рассматривают мягкий дефис как разрешающий перенос, это объясняет симптомы при условии, что Helvetica имеет пустой глиф для мягкого дефиса.
Это очень умозрительно или предположительно.
На более прочной основе отображение текста, в котором имел место перенос, не было строго определено в стандартах. Если браузеры применяют переносы к foo­bar
они должны отображать "foo" с последующим дефисом в конце строки, но стандарты не говорят, какой дефис. Это может быть HYPHEN-MINUS (то есть дефис Ascii), или HYPHEN, или даже SOFT HYPHEN, если у него есть глиф. Может быть, даже что-то еще. И это может даже зависеть от языка, поскольку у некоторых языков есть собственные дефисы.
Поэтому понятно, что браузеры WebKit начали поддерживать проприетарное свойство -webkit-hyphenate-character
, Тем не менее, похоже, что он не реализован должным образом. тестирование -webkit-hyphenate-character: "\00AD"
в Chrome и Safari в Windows 7 я заметил, что они "переносят" слова (содержащие мягкие дефисы) без добавления каких-либо дефисов (как если бы они использовали пустой глиф), даже если другие значения свойства работают нормально.
В заключение, я ожидаю, что вы можете избежать этой проблемы, избегая таких шрифтов, как StagSansWeb для текстов, которые могут переноситься через дефис. Вполне возможно, что проблема может быть решена путем изменения шрифта.
Я исследовал это подробно на баг мягких дефисов в Webkit. Короче говоря, проблема, похоже, заключается в сочетании ошибки в Helvetica Light (и некоторых других шрифтов, таких как Avenir) и ошибки в стеке шрифтов в Webkit. Вы можете исправить это, включив Arial в ваш набор шрифтов, например.
семейство шрифтов:"Apercu Light", Arial, без засечек;
У меня была та же самая проблема, происходящая с webkit/mac. Помог мне литейщик, который создал шрифт и дал работающее решение (Added Arial)
font-family:"Apercu Light", Arial, Calibri, sans-serif;
вместо
font-family:"Apercu Light", Calibri, sans-serif;
Это временное решение, пока файлы шрифтов не будут обновлены. Я предполагаю, что Arial имеет лучшую поддержку, чем helvetica на webkit / mac для этого конкретного случая.