Chrome svg-Font-Rendering Breaks Layout
В настоящее время я работаю над небольшим проектом, в котором я хотел бы использовать веб-шрифтычерез @fontface.
Я реализовал шрифт так:
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
Теперь, когда вы, вероятно, испытали Chrome, проблемы с отображением этих шрифтовгладко
После некоторых поисков я нашел решение, которое, кажется, работает: вы просто перемещаете эту часть CSS:
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
Итак, вы в конечном итоге с этим:
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
Теперь Chrome отображает шрифты плавно, и это здорово.
НО:
По некоторым причинам это ИНОГДА нарушает макет. Примерно каждый третий раз, когда я загружаю страницу, я получаю что-то вроде этого:
Все перемещено влево. Более длинные тексты вырываются из своих контейнеров. Выглядит действительно странно.
** Кто-нибудь сталкивался с этой проблемой раньше?
Я был бы рад получить совет по этому вопросу. **
Не стесняйтесь взглянуть на себя:Посмотреть Fireflycovers.com онлайн
Большое спасибо!