Пропустить навигацию

Внедрение нестандартных шрифтов посредством @font-face

19.10.2009 , ,

Jonathan Snook провел отличное исследование и опубликовал руководство по добавлению нестандартных шрифтов «Becoming a Font Embedding Master».

  • Используется правило CSS3 @font-face.

  • Поддерживается следующими браузерами: IE4+, Chrome 0.3+, Opera 9+, FF, Safari.

  • Необходимые файлы: .ttf/.otf, .oet, .svg.

Инструменты:

1. TTF2EOT
конвертация TTF в EOT для поддержки IE (на MAC OSX устанавливается из портов)

ttf2eot < Candara.ttf > Candara.eot
        
        
2. FontForge

конвертация OTF в TTF
        
        
3. Batik

        преобразование TTF в SVG.

        
java -jar batik-ttf2svg.jar Candara.ttf -o Candara.svg -id Candara

CSS



          
@font-face {
        font-family: 'Candara';
                src: url("Candara.eot");
                src: local('Candara'),
                        url("Candara.svg#Candara") format('svg'),
                        url("Candara.otf") format('opentype');
}

          


Пример со шрифтом Candara [Скачать]


Подробности в статье Becoming a Font Embedding Master и Screencast: Converting OTF or TTF to EOT

Fonts available for @font-face embedding


        

        

           
          
        

        
Комментарии

        

          

            

              

                
                
                  
              

              

                
                
              

              

                
                
              

              

                
                
                
              

            

            
 
          

        

        

        
В архив