1

Добрый день знатокам! Вопрос такой: есть trutype шрифт, который хочу кроссбраузерно отображать. Для этого рекомендуют прописать в css, например, следующую схему:

 @font-face{ font-family: 'MyWebFont';
   src: url('WebFont.eot'); src:
   url('WebFont.eot?#iefix')
   format('embedded-opentype'),
   url('WebFont.woff') format('woff'),
   url('WebFont.ttf') format('truetype'),
   url('WebFont.svg#webfont')
   format('svg'); 
 }

Но непонятно, откуда взять значение webfont, которое прописывается у svg-файла через #? Подскажите, пожалуйста, и у кого есть реально кроссбраузерно работающая схема этого @font-face? Заранее благодарен за ответу по существу.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 28 сент. 2015 в 14:18

1 ответ 1

2
@font-face{ 
   font-family: 'MyWebFont';
   src: url('WebFont.eot?#iefix') format('embedded-opentype'),
        url('WebFont.woff') format('woff'),
        url('WebFont.ttf') format('truetype'),
        url('WebFont.svg#webfont') format('svg'); 
 }

Этими строками Вы просто подключаете один и тот же шрифт из разных файлов, т.е. нет необходимости подключать svg, если у вас его нет. После # пишете названия того шрифта который у Вас указан в font-family, и естественно он должен быть в Вашем SVG-файле.

Update: Если у Вас SVG-файл примерно следующего содержания:

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="**Font2**" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

то подключать шрифт вы будете так: url('WebFont.svg#Font2') format('svg');

Вот две полезные ссылки: 1 и 2.

2
  • если по вашей логике, то тогда это должно быть как font-family: 'MyWebFont'; ... url('WebFont.svg#MyWebFont') format('svg'); т.е. после #MyWebFont, а не WebFont.svg#webfont это все теория, которую я много видел на других форумах, а у Вас есть реальный боевой пример кроссбраузерного решения, который можно посмотреть в инете?
    – aavd
    Commented 30 янв. 2012 в 6:15
  • Не совсем, может быть и другое название, смотря как он у вас в SVG-файле записан. См. обновление ответа.
    – invincible
    Commented 30 янв. 2012 в 7:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.