Pakowanie wielu wag do jednej czcionki internetowej

Question

Używam czcionki Squirrel do konwersji moich czcionek w użyteczne wersje internetowe. Nie chciałbym konwertować każdej wagi osobno i włączać ich do moich css (by dodać dużo wzdęcia za wszystkie te połączenia).

Czy istnieje sposób na pakowanie wielu wag do jednej czcionki i użycie właściwości font-weight do poprawnego wywoływania właściwych znaków?

Tutaj staram się unikać faux-bold i faux-italics.

Answer 1

Set to font-weight i font-style właściwości odpowiednio w połączeniach @font-face (zamiast domyślnej wyjście FontSquirrel gdzie wszystkie z nich są ustawione na normal i mają odrębne nazwy dla każdego waga/stylu zamiast) i wymienić je wszystkie tej samej czcionki.

Oto przykład z witryny Zbudowałem Prod

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

Zauważ, że FontSquirrel nie automatycznie wygenerować kod w ten sposób bez powodu - co jest, że niektóre starsze przeglądarki/klienckie nie obsługują font-weight i font-style właściwości wewnątrz deklaracji , więc jest bardziej zgodna wstecz, aby użyć metody, w której nazwy czcionek różnią się dla każdej wagi i stylu (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic i tak dalej).

Co więcej, FontSquirrel może to dla ciebie zrobić - jeśli klikniesz Ustawienia eksperta w Generatorze Webfont, istnieje opcja pod "CSS" o nazwie Styl Link, która wyświetli je w tym formacie.

Answer 2

Oto wykonać kopię zapasową ennui za odpowiedź:

@font-face { 
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font.eot'); 
    src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

Naprawdę nie odwrotnie tworzenia oddzielnych czcionek, ale stosując font-weight i font-style atrybuty, można ograniczyć połączenia. Po prostu deklarujesz font-family raz.