Использование ttf-файла в css

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

@font-face { 
    font-family: 'theFontFamily'; 
    src local('the font'), 
     local('the-font'), 
     url(path/to/the-font); 
} 

.fontClass { 
    font-family: 'theFontFamily', extra_settings; 
}

Таким образом, используя этот font, вы бы ожидали, что это сработает?

@font-face { 
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), 
     local('Pacifico-Regular'), 
     url(resources/fonts/Pacifico.ttf); 
} 

.logo-container { 
    font-family: 'Pacifico', cursive; 
}

Как и при попытке, код меняет шрифт, а не на нужный шрифт. Похоже на это.

Принимая во внимание, если я использую ссылку на импорт, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, просто используя следующий код работает.

.logo-container { 
    font-family: 'Pacifico', cursive; 
}

Это выглядит так.

Я, вероятно, сделал простую ошибку, и я был бы признателен, если кто-то сможет помочь мне исправить эту проблему.

источник

2016-07-22 Dan

Уверены ли вы, что у вас есть правильный URL-адрес? Причина, по которой шрифт по-прежнему выглядит по-разному локально, заключается в том, что вместо '' Pacifico' загружается 'cursive'', так как его нельзя найти – Bubblesphere

@Bubblesphere Я считаю, что это проблема. Просто найти правильный URL-адрес теперь, как тот, который у меня должен работать. И последняя версия google chrome – Dan

Убедитесь, что ссылка на источник правильно установлена. Попробуйте

@font-face { 

    font-family: 'myPacifico' ; 
    src: url('/resources/fonts/Placifico.ttf') format('truetype'); 

}

Это достаточно простой, чтобы потом использовать ... .logo-контейнер {

 font-family: 'myPacifico', san-serif;  }

Сан-засечки в этом случае является резервным. В этом случае ive связан с обычным файлом ttf. Для смелых и других стилей вам придется ссылаться на это на другом шрифте @ с другим именем.

источник

2016-07-22 20:05:42

Возможно, это будет работать (сложно сказать наверняка, не будучи в состоянии проверить 100%):

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.eot'); 
    src: url('Pacifico-Regular.eot?#iefix') 
     url('Pacifico-Regular.woff2') format('woff2'), 
     url('Pacifico-Regular.woff') format('woff'), 
     url('Pacifico-Regular.ttf') format('truetype'), 
     url('Pacifico-Regular.svg#svgFontName') format('svg'); 
}

Чтобы использовать только TrueType шрифт локально:

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.ttf'); 
}

Имейте в виду, вы должны имеют не только шрифт TrueType для максимального уровня совместимости браузера, но и для тестирования с помощью только TTF вы можете удалить любые строки, не относящиеся к версии TTF.

источник

2016-07-22 19:59:18 Toby

К сожалению, когда вы нажимаете загрузку на шрифтах Google, по крайней мере, в этом случае загружается только '.ttf'. – Dan

Я считаю, что загрузка предназначена для того, чтобы вы могли использовать шрифт локально, например, в Photoshop и Illustrator. Вы можете удалить все строки, кроме линии TTF, просто имейте в виду, что вы получите точную поддержку браузера только с TTF. – Toby

Какой браузер вы тестируете? – Bubblesphere

Использование ttf-файла в css

ответ

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