Как добавить пользовательский шрифт в CSS?

Мне было интересно, если кто-нибудь может помочь мне выяснить, как добавить локальный шрифт с моего ПК (WIN 10) на мой локальный HTML-сайт. Вот что я пробовал до сих пор.Как добавить пользовательский шрифт в CSS?

@font-face { 
    font-family: bubble; 
    src: local(fonts/bubble.otf); 
}

Здесь я хочу взять шрифт из моей папки под названием «шрифты» которым находится в папке моего сайта, а затем выбрать bubble.otf, но он не работает

body { 
    margin:0; 
    font-family: bubble; 
}

источник

2017-01-14 tsgsOFFICIAL

BTW, этот код находится внутри .css не в .html! – tsgsOFFICIAL

Вы хотите использовать 'url' не' local'. Значение «local» никогда не было бы контуром, но имя шрифта, установленного на машине ... например «Open Sans». – zgood

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

Поэтому я думаю, что вы неправильно поняли значение local, и вы должны загрузить шрифт, как если бы он был обычным шрифтом в Интернете, используя url вместо local.

источник

2017-01-14 23:04:30 GolezTrol

Если вы хотите позвонить своим шрифтам из своего локального каталога, вы должны позвонить ему, используя «url» вместо локального, как вы использовали. Ниже приведен пример того, что вы хотите достичь.

@font-face { 
font-family: Segoel; 
src: url('../font/segoel.eot'); /* IE9 Compatibility Modes */ 
src: url('../font/segoel.eot?') format('eot'), /* IE6-IE8 */ 
url('../font/segoel.woff') format('woff'), /* Modern Browsers */ 
url('../font/segoel.ttf') format('truetype'), /* Safari, Android, iOS */ 
url('../font/segoel.svg#svgsegoel') format('svg'); /* Legacy iOS */ }

Однако, ссылки на интернет-репозиториев шрифтов, таких как Google font, fontsquirrel непосредственно являются наиболее эффективными способами, особенно если вы хотите использовать различные шрифты.

источник

2017-01-14 23:29:37

Как добавить пользовательский шрифт в CSS?

ответ

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