Vraag IE9 blokkeert de download van cross-origin weblettertype


Dit maakt me gek.

Gewoon een site testen op IE9 en ontdekte dat de 'live' versie een weblettertype aan het renderen is dat ik gebruik kleiner dan op de dev-versie.

Hier is een selectie van schermgrijpers:

enter image description here

Ik gebruik de Font Squirrel @ font-face-kit. Zoals u kunt zien, is het prima op Firefox, Chrome en zelfs IE9 bij het bekijken van een lokale versie van de site.

Het enige verschil tussen de lokale en live versies is dat het lettertype wordt geladen vanuit een ander domein op de live site (ik heb het cross-domeinbeleid correct ingesteld, zoals geïllustreerd door het feit dat het op Firefox en Chrome werkt).

Ik kan me niet herinneren hoe het eruit zag in IE8 (Microsoft, nog maar eens, heb niet gedacht aan ontwikkelaars en IE9 geïnstalleerd over IE8 zonder de optie om ze tegelijkertijd uit te voeren)

De site is op http://enplanner.com zodat je de bron kunt bekijken.

Alle hulp hierover wordt het meest op prijs gesteld - dank u bij voorbaat.

Bewerk: Ik heb IE9 verwijderd en ontdekt dat het er hetzelfde uitziet op zowel lokaal als live in IE8. Het lijkt erop dat IE8 een superieure rendering-engine heeft die dichter bij FF / Chrome staat dan IE9. Dit is een vrij deprimerende ontdekking.


63
2018-02-21 11:26


oorsprong


antwoorden:


IE9 ondersteunt. WOFF; IE8 doet dit niet, en ondersteunt alleen .EOT-lettertypen.

Open de IE9 F12 Developer Tools en je ziet de volgende berichten:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

Als u uw HTTP-headers onderzoekt, is het duidelijk dat uw toegang tot meerdere domeinen niet juist is geconfigureerd, omdat er geen is Access-Control-Allow-Origin antwoordkop op uw WOFF-bestanden. Ze worden ook geleverd met het verkeerde MIME-type (text/plain) hoewel dat je probleem niet veroorzaakt. Het is echter niet gelukt om in kaart te brengen woff naar het juiste MIME-type kan problemen veroorzaken, omdat sommige servers geen bestanden met "undefined" extensies serveren en in plaats daarvan een HTTP/404 fout.


59
2018-02-21 15:05



OK, hier is wat werkte. Plaats het volgende gedeelte in uw Apache-configuratie voor de host waar u de lettertypen van gebruikt:

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

Vervang 'mijndomein.nl' door uw eigen domein of * (maar wees voorzichtig met gebruiken * omdat dit betekent dat iedereen uw CDN kan gebruiken)

De '| woff' was wat ik was vergeten. Doh!


33
2018-02-21 15:47



Voor IIS Voeg de onderstaande regels toe .... werkt als een charme


<system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>

8
2018-02-15 16:47



Wat betreft het antwoord van meanstreakuk hierboven, wil ik een aanvulling hierop maken. We hadden hetzelfde probleem en we zochten naar wat Google Web Font doet. Dus we hebben onze htaccess geplaatst, dit:         

Header set Access-Control-Allow-Origin "*"
  in plaats van ons domein. Als de asterisc, zoals Google, altijd werkt.


7
2017-12-20 21:08



Controleer of u het bestand IE (your-web.com/your-font.woff) in IE kunt openen. Als u fout 404 tegenkomt, gaat u naar IIS, dubbelklikt u op de configuratieoptie "MIME-typen" terwijl IIS-basisknooppunt is geselecteerd in de linkerpaneel en klik op de koppeling "Toevoegen ..." in het deelvenster Handelingen aan de rechterkant. Dit zal het volgende dialoogvenster openen. Voeg toe.WOFF bestandsextensie en specificeer "application / x-font-WOFF"als het overeenkomstige MIME-type.

Ik gebruik deze instructies op deze site (Robòtica educativa), Converteer ik mijn originele .ttf-lettertype naar (http://www.font2web.com/)


3
2018-04-19 08:46



Ik vond een tijdelijke oplossing. Toegevoegd aan htaccess.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

3
2017-10-08 22:15



Een alternatieve oplossing voor het gebruik van de header Access-Control-Allow-Origin is om het lettertype in uw CSS te embedden met behulp van data :.


3
2018-01-02 20:52