Добавить стиль шрифта с помощью CSS

Я добавил эти шрифты стиль моей моей страницеДобавить стиль шрифта с помощью CSS

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' /> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' /> 
    <link href='https://fonts.googleapis.com/css?family=Philosopher:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />

Как я могу добавить их на свою страницу с помощью CSS, так что у меня нет этих внешних ссылок в моем CSS

Я попытался это

@font-face { 
    font-family: 'Roboto'; 
    src: url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic'); 
}

, но в моей консоли (я использую Mlozilla) Я получил

загружаемый шрифт: отвергнуто дезинфицирующее

В Chrome ошибка говорит:

Не удалось расшифровать загруженный шрифт: https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

Затем я скачал файл, связанный с шрифта Roboto и попытался

@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../../content/fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2') format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
}

Но ничего не происходит.

источник

2017-02-05 Dimentica

http://stackoverflow.com/questions/35203696/source- sans-pro-font-in-html/35204067 # 35204067 –

Вы можете перейти по ссылке каждого шрифта Google и сохранить его в файл CSS с любым именем, например:

Перейти к этой ссылке затем скопировать и сохранить в текстовый файл с именем Roboto и изменить .txt на .css (roboto.css)

https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

Затем добавьте этот CSS файл в формате HTML, как:

<link href='roboto.css' rel='stylesheet' type='text/css'>

и сделать так же для каждого шрифта ссылки Google.

Для связывания файла woff2 локально, например, по этой ссылке, шрифт будет получить загрузки, сохранить его в шрифтах имени папки с именем opensans-light.woff2

https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

затем использовать его как

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/opensans-light.woff2) format('woff2'); 
}

источник

2017-02-05 13:11:30

IIRC, Google использует пользовательский агент, нюхающий для обслуживания различных файлов CSS в зависимости от браузера. –

@J F, что вы имеете в виду, я не получил этого ... Как это влияет на то, как я включаю шрифты? – Dimentica

Это просто

открыть ссылку в методе href внутри ваших <link> теги

например https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic
скопировать стиль CSS вам нравится
Вставьте его в файл .css

источник

2017-02-05 13:19:27

Вы можете импортировать сценарий из css, и вы можете установить семейство шрифтов в html-элементе.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic'); 
 

 
html { 
 
    font-family: 'Roboto'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
 
}

Test

Нажмите "Выполнить фрагмент кода", чтобы увидеть его работу.

источник

2017-02-05 13:22:02

Вы можете использовать @import правило для CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic');

Импорт, как это в главе вы CSS файл, и все будет работать

источник

2017-02-06 11:48:57

Добавить стиль шрифта с помощью CSS

ответ

Смежные вопросы