Як я можу створити формати підтримки nginx @ font-face та дозволити вихід-контроль-дозволити походження?


21

Я додав ці правила до mime.types:

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

Тепер заголовок Content-Type встановлюється належним чином для кожного з них. Єдине моє питання зараз - це те, що для Firefox потрібен Access-Control-Allow-Origin. Я відповів Google на цю відповідь і додав це до моєї директиви сервера:

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

але зараз мої шрифти взагалі не подаються.

Замість error.logзвітів, що вони намагаються відкрити їх у локальній файловій системі ..

02.10.2010 22:20:21 [помилка] 1641 # 0: * 15 відкрити () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" не вдалося (2: Немає такого файлу чи каталогу) , клієнт: 69.164.216.142, se rver: static.arounds.org, запит: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", хост: "static.arounds.org"

Будь-які ідеї, що може бути не в синтаксисі? Чи потрібно явно додати правило, яке говорить не намагатися відкривати його локально чи що?

EDIT : Я думаю, проблема полягає в тому, що зараз я обслуговую два різні місця. І замість цього я повинен зробити перевірку регулярного вираження всередині основного, а потім подати заголовок.


Ви також можете додати "otf" у своєму правилі
Кевін Кемпіон

Відповіді:


18

Вуто! Зрозумів .. Це було майже все, що я підозрював у своїй редагуванні, я в основному повинен був зробити перевірку назви файлів regex в моїй підошві, location {}а не робити альтернативну.

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

            if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
                add_header Access-Control-Allow-Origin *;
            }
    }

8
Ні. Ти насправді цього не робиш. Вам просто потрібно дізнатися про успадкування контексту. Якщо ви вказали кореневу директиву сайту в блоці сервера, вона буде доступна у всіх блоках розташування. Я пропоную прочитати це: blog.martinfjordvald.com/2010/07/nginx-primer
Мартін Фьордвальд

Хтось насправді згадав про це в каналі #nginx, але я забув оновити відповідь.
meder omuraliev

12
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

3
ПРИМІТКА. Якщо дане рішення не працює для вас, прочитайте це та це . Це просвічує, і ви можете знайти причину, що це не працює.
it_me

Для мене це не працює, оскільки URL-адреса шрифту містить рядок запиту
Broncha

працює для мене ...
Манан Шах

Підказка: якщо ви хмарно очистіть їх !!
shakee93

5

Усі активи

Це призведе до нормальної роботи всіх активів. Ви можете додатиroot якщо хочете визначити нове місцеположення

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

1
Так, це зламало все
AlxVallejo

3

інше рішення: помістіть, наприклад, усі свої шрифти static/fonts, і додайте

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.