Как мне использовать шрифт Dejavu для арабского сайта? - PullRequest
Новая
       14

Как мне использовать шрифт Dejavu для арабского сайта?

0 голосов
/ 12 декабря 2011

Я наконец смог заставить свой сайт отображать арабский шрифт, но это шрифт по умолчанию, который мне не нужен.

С помощью сообщества SO я узнал о шрифтах Dejavu. Я пошел на их веб-сайт и скачал папку без засечек. Я предполагаю, что мне нужно загрузить что-то на мой сервер. Если да, какой файл / файлы я загружаю? И что мне написать в моем html-файле, чтобы "ссылаться" на шрифты моего сайта? Я открыл все файлы в папке zip и только один из них указал, что я могу скачать шрифт. Но мне не нужно загружать его на свой компьютер. Мне нужно загрузить его в облако, чтобы оно было на моем сайте.

Есть идеи?

Также Как я могу загрузить сюда папку Dejavu, чтобы люди могли ее увидеть и понять, о чем я говорю?

Ответы [ 3 ]

2 голосов
/ 12 декабря 2011
1 голос
/ 13 декабря 2011

Расширение точки книжного шкафа:

Проверьте наборы @ font-face на Font Squirrel. Доступно несколько наборов DejaVu. В комплекты входят файлы CSS и DejaVu практически во всех доступных форматах, которые вы можете использовать в Интернете. Поместите файлы шрифтов в любую папку и измените CSS соответствующим образом.

Например, я храню свои определения шрифтов в /css/fonts.css, а мои шрифты в /fnt/FontName/

с сайта fonts.css 

@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
    src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
         url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
         url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
    src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
         url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
         url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
    src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
         url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
         url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
    src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
         url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
         url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
}

Тогда использовать шрифт просто: 

body {
    font-family: 'DejaVu Sans',sans-serif;
}
1 голос
/ 12 декабря 2011

Если вы хотите использовать встраивание шрифтов (и @ font-face), то вам нужно представить шрифт в разных форматах, если вы хотите охватить большинство платформ. Смотрите, например Основное руководство по @ font-face .

Но есть гораздо более простой способ: просто объявите ваши предпочтительные шрифты (после проверки, что каждый из них охватывает все символы, которые вы используете) в объявлении семейства шрифтов в CSS. Тогда не все люди увидят текст в DejaVu (только те, кто получил его вместе с, например, Linux от OpenOffice или кто отдельно загрузил установленный). Затраты на загрузку большого шрифта или нескольких шрифтов не игнорируются, особенно при использовании, например, например. медленные мобильные соединения.

...