Open sans css name

123. Как подключить сторонний шрифт в CSS

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

@font-face font-family: 'Open Sans'; 
src: local('Open Sans'), 
url('/font/open_sans.ttf') format('truetype');
>

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

@font-face font-family: 'Open Sans'; 
src: url('/font/open_sans.ttf') format('truetype');
>

Третий пример более полный и более кроссбраузерный.

@font-face font-family: 'Open Sans'; 
src: url('open_sans.eot'); 
src: url('open_sans.ttf') format('truetype'), 
url('open_sans.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
>

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в :

Способ второй (вставляется в CSS файл):

@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');

Источник

Подключение шрифтов в CSS

Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?

Коллекция Google Fonts

Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic');

в зависимости от способа подключения (в HTML или в CSS).

В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)

Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.

Самостоятельное подключение

Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты 🙂

Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.

Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot , и .woff и даже таинственный .ttf .

Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.

Настройки шрифта

Каждое правило будет выглядеть примерно так:

С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.

В моем случае css-файл начнется следующим образом:

@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url(font1-url); >@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: italic; src: url(font2-url); >@font-face < font-family: 'Open Sans'; font-weight: 700; font-style: normal; src: url(font3-url); >@font-face

Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.

Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch . Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.

Файлы шрифта

Теперь обратимся непосредственно к файлам.

В качестве значения свойства src необходимо указать все файлы, содержащие разные форматы шрифта, перечислив их имена через запятую. Браузер будет перебирать их по одному, пока не встретит подходящий. Чтобы ему не приходилось загружать каждый файл для ознакомления, рядом обычно указывают формат в качестве подсказки.

Для нашего любимого Internet Explorer организуем особое подключение.

Локальное подключение

Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local() , которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.

Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.

Источник

123. Как подключить сторонний шрифт в CSS

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

@font-face font-family: 'Open Sans'; 
src: local('Open Sans'), 
url('/font/open_sans.ttf') format('truetype');
>

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

@font-face font-family: 'Open Sans'; 
src: url('/font/open_sans.ttf') format('truetype');
>

Третий пример более полный и более кроссбраузерный.

@font-face font-family: 'Open Sans'; 
src: url('open_sans.eot'); 
src: url('open_sans.ttf') format('truetype'), 
url('open_sans.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
>

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в :

Способ второй (вставляется в CSS файл):

@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Open Sans: the friendly, open humanist sans serif typeface designed by Steve Matteson, ready to drop in your website.

License

barberboy/open-sans

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Quickly drop Open Sans into your project.

You have several options for using this project:

cd styles/fonts git clone https://github.com/barberboy/open-sans

link rel pl-s">stylesheet" href pl-s">/styles/fonts/open-sans/open-sans.css">

cd styles/fonts wget https://github.com/barberboy/open-sans/archive/master.zip unzip master.zip mv open-sans-master open-sans rm master.zip

link rel pl-s">stylesheet" href pl-s">/styles/fonts/open-sans/open-sans.css">

bower install barberboy/open-sans

link rel pl-s">stylesheet" href pl-s">/bower_components/open-sans/open-sans.css">

If you’d like bower to put it in a different directory, just create a .bowerrc file and specify the directory location:

< "directory": "app/public", "analytics": false >

Quickly test Open Sans on your site by using the CDN hosted by RawGit. Feel free to use it in production as well:

link rel pl-s">stylesheet" href pl-s">https://cdn.rawgit.com/barberboy/open-sans/2011-02-02/open-sans.css">

@import url(https://cdn.rawgit.com/barberboy/open-sans/2011-02-02/open-sans.css); body < font-family: 'Open Sans'; font-weight: 300; >

Not for you? Just use Google Fonts instead:

link rel pl-s">stylesheet" href pl-s">http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">

This project includes Open Sans normal and italic styles in five different weights. Pick and choose what you need.

body < font-family: 'Open Sans'; font-weight: 300; font-family: 'Open Sans'; font-weight: 400; font-family: 'Open Sans'; font-weight: 600; font-family: 'Open Sans'; font-weight: 700; font-family: 'Open Sans'; font-weight: 800; >

About

Open Sans: the friendly, open humanist sans serif typeface designed by Steve Matteson, ready to drop in your website.

Источник