Каков наилучший способ использования fonts.googleapis.com в файлах css, которые используются на страницах http и https? - PullRequest
0 голосов
/ 24 апреля 2019

У меня есть веб-страница, которая работает правильно, когда ее URL либо начинается с http: //, либо по умолчанию используется протокол http, когда протокол не указан, но выдает сообщение об ошибке, в котором говорится, что файл main.css может 'Не может быть найдено, когда URL-адрес веб-страницы начинается с http s : //.

В последней версии браузера Chrome просмотрите консоль, показывающую, что ошибка возникает в строке, в которой указан главный.Файл таблицы стилей css:

    <link rel="stylesheet" type="text/css" media="screen" href="/Resources/public/css/main.css" />

Используя инструмент Chrome Inpect, я обнаружил, что две строки в файле main.css, которые импортируют шрифты из fonts.googleapis.com, кажутся проблемой, потому что их URL начинаются с http: // и вызывают ошибки смешанного содержимого, поэтому браузер блокирует файл main.css.Вот строки:

    @import url(http://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
    @import url(http://fonts.googleapis.com/css?family=Asul);

Когда я изменяю эти два URL-адреса, чтобы начать с http s : // все ошибки исчезают, когда URL-адрес страницы начинается с http s : // или http: //.

Вопрос: Поскольку моя страница предназначена для использования в любом протоколе, есть ли путь внутри файла main.cssиспользовать сценарий или некоторый механизм CSS для переключения между протоколами http s и http на основе протокола, используемого страницей, которая связывает таблицу стилей main.css?Скажите что-то вроде следующего псевдокода:

  *IF protocol is https then*

    @import url(https://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
    @import url(http**s**://fonts.googleapis.com/css?family=Asul);

  *ELSE*

    @import url(http://fonts.googleapis.com/css?family=Roboto|Alex+Brush);
    @import url(http://fonts.googleapis.com/css?family=Asul);

  *ENDIF*

Я говорю внутри, потому что я не хочу создавать две версии файла main.css, по одной для каждого протокола, и не хочу разбивать ихстроки в отдельные файлы таблиц стилей и как-то их тоже связываем.

1 Ответ

0 голосов
/ 24 апреля 2019

Я не уверен, почему вы хотите загружать шрифты через http, когда https доступен, но простое создание протокола будет работать для вас, поэтому просто обновитесь до:

@import url(//fonts.googleapis.com/css?family=Roboto|Alex+Brush);
@import url(//fonts.googleapis.com/css?family=Asul);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...