встраивание шрифтов веб-сайта, какой способ лучше всего подходит для кроссбраузерных возможностей?
Иногда мои клиенты запрашивают определенный шрифт для использования на своем веб-сайте. Я пытаюсь встроить его с помощью CSS @font face, но он не очень удобен для кросс-браузера. Иногда я использую шрифты Google, но они никогда не бывают точно такими же.
Кто-нибудь знает лучший способ встраивания шрифта с максимально возможными возможностями кроссбраузерности? Ни в одной Системе управления контролем, такой как Wordpress.
2 answers
Вариант Google хорош, но ваш лучший вариант - @font-face. Он поддерживается почти во всех браузерах (кроме Opera Mini), которые вы можете увидеть в разделе " могу ли я использовать", и для решения проблемы, связанной с тем, что некоторые шрифты отображаются в браузерах по-разному, вам просто нужно найти лучшие настройки для вашего шрифта. Некоторые браузеры плохо отображают легкий вес, например Lato в Chrome. Вот настройки, которые, на мой взгляд, работают лучше всего:
@font-face {
font-family: 'Lato';
src: url('/content/Fonts/Lato-Light-webfont.eot');
src: url('/content/Fonts/Lato-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/content/Fonts/Lato-Light-webfont.woff') format('woff'),
url('/content/Fonts/Lato-Light-webfont.ttf') format('truetype'),
url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
font-weight: 300;
font-style: normal;
text-rendering: antialiased;
}
А затем вы добавляете шрифт svg только для использования в webkit браузеры:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Lato';
src: url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
font-weight: 300;
font-style: normal;
text-rendering: antialiased;
}
}
Поэкспериментируйте, это лучший способ узнать, и настройки будут отличаться от шрифта к шрифту.
Я бы хотел, чтобы был лучший ответ, чем тот, который я даю, но лучше всего использовать сценарии на стороне сервера для определения веб-браузера пользователя, а затем в зависимости от браузера...
Если он старый, как Netscape 4.xx:
Вы можете использовать тег html-шрифта, чтобы определить шрифт и размер нужного шрифта. См.: http://www.w3schools.com/tags/tag_font.asp
Если браузер слишком новый, чтобы правильно обрабатывать тег шрифта, как большинство сейчас, вам придется придерживаться с определением шрифтов в CSS:
Вот пример, выполненный с помощью PHP:
<?php
$browser=$_SERVER['HTTP_USER_AGENT'];
$old=0; //assume new browser
if (strpos($browser,"netscape") > -1){$old=1;}
if (strpos($browser,"IE3.0") > -1){$old=1;}
if ($old==1){
//old browser HTML
?>
<font face="verdana">This is verdana font</font>
<?php
}else{
//new browser HTML
?>
<p style="font-family: verdana;">This is verdana font</p>
<?php
}
?>
Что касается конкретных шрифтов, отличных от того, что я показал, вы можете заменить verdana именем шрифта этого конкретного шрифта, но пользователям необходимо будет убедиться, что у них есть соответствующий файл шрифта в их системе, или отображение шрифта может быть неправильным, так как браузер найдет следующий лучший шрифт.