Форум Сайтостроение Веб-строительство

Прицепление шрифтов в Internet Explorer

[Удален]
1820

Никто не прицеплял не так давно? На Хабре есть статья, но там идет через генерацию.

Прицепление шрифтов давно возможно в Internet Explorer, но только шрифтов в собственническом формате шрифта EOT. Есть единственный способ создания EOT-шрифтов — воспользоваться майкрософтовским инструментом WEFT, доступным только на Windows. Только шрифты TrueType и OpenType TT могут быть преобразованы в формат EOT, а шрифты OpenType PS (.otf) использоваться не могут.

Во правилах @font-face браузер Internet Explorer воспринимает только дескрипторы font-family и src, так что каждое семейство может содержать только одно начертание. Он не понимает указания format() и проигнорирует любое правило @font-face, содержащее такие указания. Это поведение можно использовать, чтобы задействовать прицепление шрифта кросс-платформенно:

/* Определение шрифта для Internet Explorer */

/* (*должно* стоять первым) */

@font-face {

font-family: Gentium;

src: url(Gentium.eot) /* нельзя использовать format() */;

}

/* Определение шрифта для других браузеров */

@font-face {

font-family: Gentium;

src: url(Gentium.ttf) format("opentype");

}

В общем, буду рад любым советам по использованию коммерческих шрифтов в стилях.

YX
На сайте с 16.03.2010
Offline
0
YurikXXX
#1

а в других браузерах как делать будете?

[Удален]
#2
YurikXXX:
а в других браузерах как делать будете?

Правило для эксплориера пишется первым, а потом для остальных используется стандарт.

YurikXXX, прочитайте пост, в нем все написано.

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#3

Moi-Sha, использование внешних шрифтов, имхо конечно, это очень кривой способ. Да и IE будет выбрасывать предупреждение об этом, что очень некрасиво.

Moi-Sha:
В общем, буду рад любым советам по использованию коммерческих шрифтов в стилях.

не использовать. Где это очень-очень нужно - поставить рисунок или флеш.

И если шрифт такой прямо коммерческий, зачем же юзерам отдавать TTF?

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
P
На сайте с 10.02.2010
Offline
2
Pepelacio
#4
не использовать. Где это очень-очень нужно - поставить рисунок или флеш.

Конечно лучше не использовать. Но вот у меня был такой случай :) Заказчик отдал мне дизайн на верстку, но там использовались нестандартные шрифты, текст картинкой делать нельзя, так как его там вообще мало, но текст нужный, должна быть возможность копирования текста. Ну а от флэша заказчик тоже отказался, вобщем поставлен был я в такие условия, что нужно было реализовать по-другому. Вот как сделал я.

index.html 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

	<title>Title</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

	<script type='text/javascript' src='jquery.fontavailable-1.1.js'></script>

	<script type="text/javascript">

	$(document).ready(function(){

		if(!$.fontAvailable('myfont')) {

			Cufon.replace('p', {fontFamily: 'myfont'});

		}

	});

</script>

</head>

<body>



<div>

	<p>bla-bla-bla</p>

</div>



</body>

</html>

style.css 


@font-face {

font-family: 'myfont';

src:url('myfont.ttf');

}



html, body{

font-family:Arial, Helvetica, sans-serif;

}



p {

font:bold 26px 'myfont';

}

jquery.fontavailable-1.1.js 


/* fontAvailable jQuery Plugin, v1.1

 *

 * Copyright (c) 2009, Howard Rauscher

 * Licensed under the MIT License

 */

 

(function($) {

	var element;

	

    $.fontAvailable = function(fontName) {

        var width, height;

        

        // prepare element, and append to DOM

        if(!element) {

            element = $( document.createElement( 'span' ))

                .css( 'visibility', 'hidden' )

                .css( 'position', 'absolute' )

                .css( 'top', '-10000px' )

                .css( 'left', '-10000px' )

                .html( 'abcdefghijklmnopqrstuvwxyz' )

                .appendTo( document.body );

        }

        

        // get the width/height of element after applying a fake font

        width = element

            .css('font-family', '__FAKEFONT__')

            .width();

        height = element.height();

        

        // set test font

        element.css('font-family', fontName);

        

        return width !== element.width() || height !== element.height();

    }

})(jQuery);
Верстка под WordPress. Создание/редактирование/настройка шаблонов и плагинов (/ru/forum/471170) ICQ 591-784-389
Шарашка miralinks - отклоняет Смогу ли я монетезировать У вас есть источник
[Удален]
#5

Pepelacio, спасибо за солюшн.

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

<a href="path">Текст ссылки</a>

и ссылке дал блочный вид при помощи css, где на баграунд закинул рисунок со шрифтом, а тексту дал размер меньше муравья. Вроде и посетитель видит тоже, что и поисковик и обработки дополнительной избежал ))

P
На сайте с 10.02.2010
Offline
2
Pepelacio
#6
Moi-Sha:
Pepelacio, спасибо за солюшн.
Клиенту нужно было шрифтом вывести меню, чтобы любоваться на шрифт. Я решил как всегда браузер нагнуть.

Интересное решение, главное простое)) Но это ведь меню, а у меня проблема заключалась именно в том, что другим шрифтом весь контент отображался)

Желание клиента - закон, но желание вебмастера законнее.

Может и законнее, но иногда клиенты шарящие немного в html и заметят, что сделал не так как им хотелось)) Правда таким невозможно ничего объяснить, что некоторые вещи лучше не делать вообще, чем так, как они хотят)

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
F
На сайте с 22.12.2005
Offline
48
Flame
#7

Moi-Sha, попробуйте вот это - http://cufon.shoqolate.com/generate/, может подойдет. Я часто использую, когда нужны на сайте нестандартные шрифты

Наслаждение жизнью - это искусство
P
На сайте с 10.02.2010
Offline
2
Pepelacio
#8
Flame:
Moi-Sha, попробуйте вот это - http://cufon.shoqolate.com/generate/, может подойдет. Я часто использую, когда нужны на сайте нестандартные шрифты

Да, тоже штука хорошая, это в приниципе тоже самое что я предложил, только немного в другом исполнении, идея та же. Но этот сервис не все шрифты "кушает" к сожалению :( Хотя тоже иногда пользуюсь

Помощь в фильтрации ботов Резкий всплеск прямых заходов. Вопрос о профессии СЕО

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий