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
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 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
    30 янв 2012 в 6:15
  • Не совсем, может быть и другое название, смотря как он у вас в SVG-файле записан. См. обновление ответа.
    – invincible
    30 янв 2012 в 7:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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