Good day to connoisseurs! The question is: there is a trutype font that I want to cross-browser display. For this, it is recommended to register in css, for example, the following scheme:

@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'); }

But it is not clear where to get the value of webfont , which is webfont to the svg-file via # ? Tell me, please, and who has a really cross-browser working scheme of this @font-face ? Thanks in advance for the answer on the merits.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

 @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'); }

With these lines you simply connect the same font from different files, i.e. There is no need to connect svg if you do not have it. After # write the name of the font that you have in the font-family, and of course it should be in your SVG-file.

Update: If you have an SVG file of the following content:

 <?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>

Then you will connect the font like this: url ('WebFont.svg # Font2 ') format ('svg');

Here are two useful links: 1 and 2 .

  • if according to your logic, then it should be like font-family: 'MyWebFont'; ... url ('WebFont.svg # MyWebFont') format ('svg'); those. after #MyWebFont, not WebFont.svg # webfont is all theory that I have seen a lot in other forums, and do you have a real combat example of a cross-browser solution that can be viewed in the internet? - aavd
  • Not really, maybe another name, depending on how it is recorded in your SVG file. See the answer update. - invincible