Вставить только некоторые буквы из google webfonts

Я использую web-сайты Roboto и Roboto Sans. Считывая Google Developers Doc, есть способ only embed certain letters всего веб-сайта, используя ?text=customletters.Вставить только некоторые буквы из google webfonts

Я создал эти два встраивать ссылки:

<!-- whole roboto font --> 
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'> 
<!-- only custom letters of roboto slab using text?= --> 
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example' rel='stylesheet' type='text/css'>

1) Это не работает для меня в сафари. Что-то не так с моим кодом?

2) Хотя, есть способ объединить эти две строки, чтобы избежать двух запросов на другой сервер при каждой загрузке страницы?

3) Последний и наименее, делает @import и link href способ встраивания никакой разницы в производительности?

JSFIDDLE DEMO

источник

2016-03-04 Marian Rick

Почему вы только хотите загрузить некоторые письма?Я не думаю, что это по соображениям производительности? – wernersbacher

Да, это так! Я хочу реализовать его, чтобы избежать изображений по причинам SEO, но мне нужно всего 10 писем всего шрифта. Сохранение около 90% размера веб-сайтов. –

1) Это не работает для меня в сафари. Что-то не так с моим кодом?

Проблема заключается в ваших параметрах GET. Вопросительный знак (?) отделяет URL-адрес и параметры GET. Однако каждый отдельный параметр GET разделяется амперсандом (&).

Вы используете два questionmarks:

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example 
           ^      ^

Это неправильно, поскольку второй один отделяет параметр первого GET (family) от второго (text), так что используйте амперсанд вместо:

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&text=I%20am%20an%20example 
           ^      ^

2) Хотя, есть способ объединить эти две линии, чтобы избежать двух запросов на другой сервер на каждой загрузке страницы?

шрифты Google можно разделить с | как так:

https://fonts.googleapis.com/css?family=Inconsolata|Roboto 
               ^

ОДНАКО, как вы хотите, чтобы все символы в одном шрифте и лишь немногие во второй шрифт, то это не представляется возможным. StackOverflow: Optimizing Multiple Google Web Fonts.

3) Последний и наименее, делает @import и ссылку HREF способ встраивания никакой разницы в производительности?

StackOverflow: CSS: @import vs. <link href="">

источник

2016-03-04 13:36:39 h2ooooooo

Большое спасибо, это отличный и ясный ответ. У меня были проблемы, чтобы найти потоки стека, которые вы разместили, они очень полезны! –

@MarianRick Ты очень рад. Первый из них был найден по Googling 'google multiple fonts text', а второй - Googling' link href vs @ import'. – h2ooooooo

Скачать шрифт и использовать FontForge (https://fontforge.github.io/en-US/), в этой теме учебник how to remove characters from a font file?

источник

2016-03-04 13:50:56

google гораздо приятнее, чем вы. google позволяет загружать шрифты ... https://developers.google.com/fonts/faq –

Получил это - «* Вы можете загружать шрифты, чтобы использовать их для своих макетов, в ваших документах или ** для размещения их на ваш собственный сервер. *** ". Тем не менее, он все равно не будет использовать CDN Google. – h2ooooooo

Вставить только некоторые буквы из google webfonts

ответ

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