字体无法在Mac / iOS Safari上呈现

Question

I have an issue with a font not being rendered correctly at all on iOS and MAC OSX. It renders correctly everywhere else I've tried, including a brand-new virtual Windows 7 machine.

It's really starting to grind my gears.

Here's my CSS for defining the font.

@font-face {
    font-family: 'Knockout';
    src: local('☺'), 
         url('Fonts/knockout.otf') format('otf'), 
         url('Fonts/knockout.woff') format('woff'),
         url('Fonts/knockout.ttf') format('truetype'),
        url('/Fonts/knockout.svg#Knockout') format('svg');
    font-weight: normal;
    font-style: normal;
}

For the legacy SVG file, here's the header:

<defs>
<font id="Knockout" horiz-adv-x="269" >
  <font-face 
    font-family="Knockout"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1000"

And here's the LESS/CSS styling for the actual class where the font needs to be applied:

 .header
       {
            position: absolute;
            top: 0;
            font-family: 'Knockout';
            color: @ColorTealD;
            font-size: 10vw;
            pointer-events: none;
            text-rendering: optimizeLegibility;
       }

As far as StackOverflow links I've visited:

css @font-face doesn't work

Webfont not showing in iOS

@font-face not working in mobile Webkit

I also visited a link that suggested using the smileyface trick, and another one that suggested prefacing the SVG URL with a '/'. I also wiped the Safari cache on my iPhone. I need to emphasize that this font appears in other browsers, including completely wiped virtual machines. Switching fonts isn't an option at this point, because $500 has been forked over for licensing.

Anyone have any ideas on what else I could do, to fix this? I'm pretty sure the next steps involve throwing a virgin into a volcano or bloodletting a goat.

Answer 1

This could be a problem with the browser and not the font or your code. Every browser renders the font differently. I also had this problem in chrome.

Did you try another font? If another font works, than it's the browsers fault.

Answer 2

There was an error in the "Knockout 32" font original files. I opened it in FontForge and recreated it.