Många användare har skapat några fantastiska dokument för användning i HireHop genom att använda HTML5, JavaScript och CSS-funktionalitet. För dessa dokument behöver användare ibland ett speciellt teckensnitt som de lagrar på sin server, men ibland verkar inte teckensnittet fungera i HireHop-dokumentet. Anledningen till detta är på grund av begränsningar av ursprungsresursdelning (CORS) i webbläsare.

Typsnitt som Inte Laddas in i Dokument

De flesta webbläsare tillåter inte förfrågningar över domäner, det beror på samma säkerhetspolicy för ursprung. Detta innebär att ibland kan du göra fel när du använder webb-teckensnitt från en annan domän och teckensnittet inte laddas i webbläsaren eller i HireHop-dokument.

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('https://my_server.com/fonts/OpenSans.woff2') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

Lösningen

För att fixa begränsningar för ursprungsgränser för dina teckensnitt måste svaret från fjärrservern som är värd för teckensnittsfilerna innehålla huvudet Access-Control-Allow-Origin.

Om du använder teckensnittstjänster som Typekit eller Google Fonts, eller kanske innehållsleveransnätverk som BootstrapCDN, CdnJS eller JsDelivr för att ladda dina önskade teckensnitt behöver du inte göra någonting eftersom huvudet Access-Control-Allow-Origin är redan skickat in sitt svarhuvud.

Apache

Om du vill konfigurera en Apache-webbserver sätter du följande kod i filen httpd.conf eller .htaccess.

  1. Lägg till rubriker av MIME-typ på Apache:
    AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
    
  2. Aktivera resursdelning mellan ursprung (CORS) på Apache för mimtyperna:
    <IfModule mod_headers.c>
      <FilesMatch ".(eot|otf|svg|ttf|woff|woff2?)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>
    

NGINX

För att konfigurera en NGINX-webbserver, lägger du följande kod i /etc/nginx/nginx.conf eller din anpassade /etc/nginx/conf.d/custom.conf-fil.

  1. Lägg till rubriker av typen MIME på NGINX:
    application/vnd.ms-fontobject    eot;
    application/x-font-opentype      otf;
    image/svg+xml                    svg;
    application/x-font-ttf           ttf;
    application/font-woff            woff;
    application/font-woff2           woff2;
    
  2. Aktivera resursdelning mellan ursprung (CORS) på NGINX för MIME-typerna:
    location ~* .(eot|otf|svg|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
    }
    

IIS

För att konfigurera Microsoft IIS lägger du till följande kod i web.config system.webServer-filen.

  • Aktivera resursdelning mellan ursprung (CORS) på IIS
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="access-control-allow-origin" value="*" />
          <add name="access-control-allow-headers" value="content-type" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
    

PHP

Om du inte kan ändra serverinställningarna kan du alltid använda PHP för att leverera teckensnittfilen.

  • Använd en serverskriptfil istället för en fysisk typsnittsfil
    <style type="text/css">
    @font-face {
        font-family: 'OpenSans';
        src: url('https://my_server.com/fonts/OpenSans.php') format('woff2');
    }
    html, body{
        font: normal 16px OpenSans, sans-serif;
    }
    </style>
    
  • Hur du åtgärdar problem mellan domäner @font-face med PHP
    <?php
    // fonts.php
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/font-woff2');
    echo @file_get_contents('/fonts/OpenSans.woff2');
    ?>
    
Posted in API