Замените текст изображением, если шрифт недоступен

Question

У меня есть веб-страница, в которой для заголовка используется небезопасный шрифт (@ font-face ...).

Это будет выглядеть довольно плохо, если браузер зрителя не поддерживает это, так есть ли способ обнаружить эту возможность и заменить текст изображением, если оно не поддерживается?

@font-face {
    font-family: 'awesomefont';
    src: url('fonts/awesomefont-webfont.eot');
    src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/awesomefont-webfont.woff') format('woff'),
         url('fonts/awesomefont-webfont.ttf') format('truetype'),
         url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'awesomefont'; /* Substitute with image if font not supported */
}

p {
    font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}

Answer 1

@font-face {
  font-family: 'Nosifer Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

p {
  font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}

или вы хотите, чтобы ВСЕГДА был указан шрифт для вашего заголовка ... в этом случае я бы даже не стал сталкиваться с трудностями работы с пользовательскими шрифтами. Просто создайте свой имидж и используйте это 100% времени. Затраты на загрузку всей библиотеки шрифтов для одного изображения заголовка просто глупы.

Answer 2

Один из вариантов - использовать одну из библиотек JS, которые измеряют ширину строки, чтобы определить, доступен ли шрифт. К сожалению, функциональность в JS не позволяет делать то, что вы хотите напрямую.

Вот несколько реализаций, в которых используется метод измерения строки:

• http://derek1906.site50.net/works/jfont.php
• http://www.lalit.org/lab/javascript-css-font-detect/

Answer 3

Я не уверен, есть ли способ сделать то, что вы просите. Но я обычно использую cufon для использования пользовательских шрифтов на своих сайтах. Он использует холст для создания изображения из текста. Если браузер не поддерживает JavaScript, он просто отображает необработанный текст

http://cufon.shoqolate.com/generate/