Додаємо кирилицю в шрифт Source Sans Pro для Bootstrap-теми Lumen

У каталозі безкоштовних тем для Bootstrap є симпатична тема Lumen , в ній використовується шрифт Source Sans Pro, в якому «з коробки» відсутня кирилиця. Цю проблему можна частково вирішити самостійно, скомпілювавши шрифт з початкових кодів. Чому частково — см. висновок .
 
 
 

1. Встановлюємо Adobe Font Development Kit for OpenType

Викачуємо Adobe Font Development Kit for OpenType . Установка зводиться до розпаковування архіву в яку-небудь папку, у якої абсолютний шлях не містить пробілів, та запуску скрипта FinishInstallWindows.cmd з правами Адміністратора. Після цього потрібно перелогініться, або перезавантажитися.
 
 

2. Викачуємо исходники шрифту

Беремо з GitHub відгалуження початкових кодів шрифту і розпаковуємо куди-небудь. Ця гілка містить в собі кириличний і грецький алфавіти, які поки ще не включені в офіційний реліз.
 
 

3. Визначаємо необхідні накреслення

Ісходникі шрифту містять багато різних накреслень, з'ясуємо які саме потрібні нам. Відкривши файл bootstrap.css теми Lumen, в першому рядку ми бачимо що шрифти імпортуються з сервера google:
 
@ import url ("/ / fonts.googleapis.com / css? family = Source + Sans + Pro: 300,400,700,400 italic"); 

Переходимо за цією адресою, отримуємо опис:
 
@ font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local ('Source Sans Pro Light'), local ('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format ('woff');
}
@ Font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local ('Source Sans Pro'), local ('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format ('woff');
}
@ Font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local ('Source Sans Pro Bold'), local ('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format ('woff');
}
@ Font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local ('Source Sans Pro Italic'), local ('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format ('woff');
} 

Це означає, що нам потрібні всього чотири накреслення: Light, Regular, Bold, Italic.
 
 

4. Компілюємо накреслення

Компіляція проводиться командою makeotf-r . Ця команда за один виклик обробляє одне накреслення в поточній папці. Замість того, щоб ходити по папках в консолі і кожен раз запускати команду вручну, створимо скрипт для PowerShell, який в пакетному режимі скомпілює всі необхідні файли. За основу візьмемо з кореневої папки шрифту скрипт build.sh і збережемо новий файл під ім'ям build.ps1 там же.
 
$ family = 'SourceSansPro'
$ RomanWeights = 'Bold', 'Light', 'Regular'
$ ItalicWeights = 'It'

# Clean existing build artifacts
rm-recurse-force target
mkdir target
mkdir target \ otf

foreach ($ w in $ romanWeights)
{
  cd Roman \ $ w
  makeotf-r-o .. \ .. \ target \ otf \ $ family-$ w.otf
  cd .. \ ..
  rm Roman \ $ w \ current.fpr # remove default options file from the source tree after building
}

foreach ($ w in $ italicWeights)
{
  cd Italic \ $ w
  makeotf-r-o .. \ .. \ target \ otf \ $ family-$ w.otf
  cd .. \ ..
  rm Italic \ $ w \ current.fpr # remove default options file from the source tree after building
}
 

Пробуємо запускати скрипт . \ Build.ps1 з правами адміністратора. Якщо виникає помилка безпеки, то це означає, що запуск скриптів PowerShell заборонений політикою. Щоб вирішити виконання вводимо команду:
 
Set-ExecutionPolicy-Scope CurrentUser-ExecutionPolicy RemoteSigned 

Після цього має все заробити і в папці target \ otf \ з'являться чотири файли. Otf.
 
 

5. Конвертуємо. Otf в. Woff

Викачуємо sfnt2woff і зберігаємо в папці зі шрифтом. Пишемо скрипт convert.ps1 для конвертації:
 
$ otfFiles = dir target \ otf-Filter *. otf-Name

# Clean existing convert artifacts
rm-recurse-force target \ woff
mkdir target \ woff

foreach ($ otf in $ otfFiles)
{
  . \ Sfnt2woff.exe target \ otf \ $ otf
}
mv target \ otf \ *. woff target \ woff
 

Після запуску скрипта в папці target \ woff \ з'являться переконвертувати файли.
 
 

6. Підключаємо шрифт до проекту

У випадку з ASP.NET MVC, копіюємо. Woff-файли в папку fonts \ проекту і включаємо їх у нього. У папці Content \ створюємо новий файл bootstrap.lumen.path.css і записуємо в нього наступне:
 
@ font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: url (/ fonts / SourceSansPro-Light.woff) format ('woff');
}
@ Font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url (/ fonts / SourceSansPro-Regular.woff) format ('woff');
}
@ Font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: url (/ fonts / SourceSansPro-Bold.woff) format ('woff');
}
@ Font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: url (/ fonts / SourceSansPro-It.woff) format ('woff');
}
 

Додаємо в файл App_Start \ BundleConfig.cs новий рядок. Важливо, щоб вона була нижче ніж bootstrap.lumen.css .
 
bundles.Add (new StyleBundle ("~ / Content / css"). Include (
            "~ / Content / bootstrap.lumen.css",
            "~ / Content / bootstrap.lumen.path.css",
            "~ / Content / site.css"));
 

 

Висновок

На цьому все, проблема частково вирішена. Частково — тому що на даний момент не існує курсивного накреслення для кирилиці.
 
 
Розробник шрифту, Paul Hunt , на питання про курсиві відповів, що кирилиця небудь з'явиться, але він не може сказати коли це станеться.
 
Архів готових. Woff-файлів можна завантажити тут .

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.