Widziałem kilka nowych witryn internetowych, które używają niestandardowych czcionek w swoich witrynach (inne niż zwykłe Arial, Tahoma itp.).
I obsługują niezłą liczbę przeglądarek.
Jak to się robi? Jednocześnie uniemożliwiając ludziom swobodny dostęp do pobierania czcionki, jeśli to możliwe.
cufon
Odpowiedzi:
Ogólnie rzecz biorąc, możesz użyć niestandardowej czcionki, używając
@font-face
w swoim CSS. Oto bardzo podstawowy przykład:Następnie, trywialnie, aby użyć czcionki na określonym elemencie:
(
.classname
to twój selektor).Zwróć uwagę, że niektóre formaty czcionek nie działają we wszystkich przeglądarkach; możesz użyć generatora fontsquirrel.com , aby uniknąć zbytniego wysiłku przy konwersji.
Możesz znaleźć fajny zestaw bezpłatnych czcionek internetowych dostarczanych przez Google Fonts (ma również automatycznie generowane
@font-face
reguły CSS , więc nie musisz pisać własnych).Nie, nie można stylizować tekstu za pomocą niestandardowej czcionki osadzonej za pośrednictwem CSS, jednocześnie uniemożliwiając ludziom jej pobieranie. Musisz użyć obrazów, Flash lub HTML5 Canvas , z których wszystkie nie są zbyt praktyczne.
Mam nadzieję, że pomogło!
źródło
@font-face
działa ze wszystkimi rozsądnie nowymi przeglądarkami, ale musisz mieć odpowiednie formaty; dlatego zaleciłem użycie fontsquirrel.com do automatyzacji procesu konwersji i generowania reguł. I tak, Google Webfonts są darmowe do użytku komercyjnego ( mały link, aby uzyskać więcej informacji ).font-style:
orazfont-weight:
w@font-face
deklaracji łamie żadnych norm?format('truetype')
między źródłowym adresem URL a rozszerzeniem;
.Aby upewnić się, że czcionka jest kompatybilna z różnymi przeglądarkami, upewnij się, że używasz następującej składni:
Zaczerpnięte stąd .
źródło
Musisz pobrać plik czcionki i załadować go do swojego CSS.
Fe używam czcionki Yanone Kaffeesatz w mojej aplikacji internetowej.
Ładuję i używam go przez
w moim arkuszu stylów.
źródło
Obecnie w sieci są używane cztery formaty kontenerów czcionek:
EOT, TTF, WOFF,
iWOFF2.
Niestety, pomimo szerokiej gamy opcji, nie ma jednego uniwersalnego formatu, który działałby we wszystkich starych i nowych przeglądarkach:
Jeśli chcesz, aby Twoja aplikacja internetowa miała tę samą czcionkę we wszystkich przeglądarkach, możesz podać wszystkie 4 typy czcionek w CSS
źródło
#iefix
? i ta częśćfont-family: 'besom'; !important
,!important
jest na zewnątrz;
?Jeśli nie znajdziesz żadnych czcionek, które lubisz na Google.com/webfonts lub fontsquirrel.com, zawsze możesz utworzyć własną czcionkę internetową, korzystając z utworzonej przez siebie czcionki.
oto fajny samouczek: Stwórz własny zestaw czcionek internetowych
Chociaż nie jestem pewien, czy uniemożliwić komuś pobranie Twojej czcionki.
Mam nadzieję że to pomoże,
źródło
istnieje również interesujące narzędzie o nazwie CUFON . Na tym blogu jest demonstracja, jak go używać. To naprawdę proste i interesujące. Ponadto nie pozwala ludziom ctrl + c / ctrl + v wygenerowanej treści.
źródło
Pracuję na Win 8, użyj tego kodu. Działa dla IE, FF, Opera, itp. Zrozumiałem: czcionka woff jest lekka i powszechna w czcionkach Google.
Przejdź tutaj, aby wcześniej przekonwertować czcionkę ttf na woff.
źródło
Przede wszystkim nie możesz uniemożliwić ludziom pobierania czcionek, chyba że są one twoje, a to zwykle zajmuje miesiące. I nie ma sensu uniemożliwiać ludziom używania czcionek. Wiele czcionek, które widzisz na stronach internetowych, można znaleźć na bezpłatnych platformach, takich jak ta, o której wspomniałem poniżej.
Ale jeśli chcesz zaimplementować czcionkę w swojej witrynie, przeczytaj to: Istnieje dość prosty i darmowy sposób na wprowadzenie czcionek do Twojej witryny. Poleciłbym czcionki Google, ponieważ jest darmowy i łatwy w użyciu. Na przykład użyję czcionki Bangers z Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Tak by to wyglądało: HTML
CSS
źródło