Jak stworzyć własną czcionkę. Porady i programy. Łatwy sposób podłączenia czcionki internetowej

Cześć wszystkim! Obecnie, w ramach kategorii projektowania stron internetowych, chcę opowiedzieć o czcionkach, które powinny być używane w rozwoju witryny internetowej.

Z reguły, nie każdy myśli o tym, jakie czcionki powinny być używane do części treści witryny. Wybór pięknych czcionek dla witryny jest najważniejszą częścią projektowania projektowania. Ponieważ czytelność informacji o witrynie zależy od tej części, a to jest znane najważniejsze na stronie. Z tego powodu bardzo poważnie jest godna tego problemu.

Ale możliwe jest stosowanie w projekcie witryny tylko te czcionki, które znajdują się w przyszłych witrynach. Odbywa się to, aby strony były wyświetlane poprawnie ze wszystkich użytkowników o różnych systemach operacyjnych i przeglądarkach. W przeciwnym razie, jeśli używasz nie standardowych czcionek, większość odwiedzających zobaczy wszystko na różne sposoby iw większości przypadków w brzydkim formie. Z tego powodu zaleca się użycie standardowych czcionek wymienionych poniżej. Lista czcionek zawiera czcionki zainstalowane w systemie operacyjnym Windows XP i powyżej.

W tym artykule nie uważam za czcionki z innych system operacyjny. Doświadczony trudniej musi znać czcionki w różnych systemach operacyjnych, a podczas układu piszę ten moment w stylach CSS.

Zasadniczo stosuje się głównie dwie odmiany czcionek.

czcionki z serifami
posiekane czcionki (czcionki bez serifów)

Czcionki z serifami- (angielski. Serif - sprzedający) Czcionki zaczyna się i kończy pociągnięciami. Na przykład razy nowy rzymski.

Czcionki bez satelitów(posiekane czcionki) - (eng.sans-serif - sexing) czcionki z surowymi płynnymi liniami bez serifów. Na przykład arial.

Poniżej możesz zobaczyć zrzut ekranu czcionek z serifem i bez.

Czcionki do projektowania stron internetowych:

Arial.
Arial Black.
Arial wąski.
Zarezerwuj Antiquę.
Stuletnia gotyk.
Komiks Sans SM.
Courier New.
Franklin Gothic Medium.
Gruzja.
Wpływ.
Konsola Lucida.
Lucida Sans Unicode.
Microsoft Sans Serif.
Palatino linotype.
Sylfaen.
Tahoma.
Czcionka Times New Roman.
Trebuchet MS.
Verdana.
Webdes (różne znaki i znaki)
Skrzydle (różne znaki i znaki)

Również chcę również zauważyć taką chwilę, ponieważ brak kursywności w wielu czcionkach, zamiast racjonowania zapłonu w nich, ponieważ tekst staje się słabo czytelny.

Z standardowe czcionki Okna nie mają utwardzenia:

Arial Black.
Komiks Sans SM.
Franklin Gothic Medium.
Wpływ.
Konsola Lucida.
Lucida Sans Unicode.
Microsoft Sans Serif.
Sylfaen.
Tahoma.

Odkąd odebrałem czcionki, które nie mają rejsu, dla jednego chcę zauważyć fakt, że istnieją czcionki, które są pierwotnie czcionki z napisem tłuszczowym. Z tych powodów stosowanie stylów wskazujących na pogrubienie nie ma sensu, ponieważ w rezultacie nie otrzymamy tego, czego potrzebujesz.

Istnieje ogromna liczba sposobów znalezienia odpowiedniej czcionki dla Twojej witryny. Na przykład można korzystać z usług z ogromnymi bibliotekami czcionek, które sugerują płatną subskrypcję.

Jeśli Twój budżet jest ograniczony lub eksperymentować z małym projektem, możesz użyć darmowych czcionek internetowych znajdujących się w bezpłatnym dostępie. Wyszukiwanie odpowiedniej czcionki internetowej dla witryny może zajmować ogromną ilość czasu, więc oferujemy wybór najlepszych wśród nich.

1. Montserrat.

Jako jego rozwój, typografia pozostawia od starożytnych plakatów miejskich i znaków. Stwórca tej czcionki próbował zachować piękno typografii miejskich plakatów widzianych przez nią na ulicach w Buenos Aires.

2. Abrile Fatface.

Abril Fatface jest częścią dużej rodziny czcionek, która jest reprezentowana przez 18 stylów stworzonych do różnych celów. Ta czcionka wyróżnia się silną, elegancką obecnością, co czyni go doskonałym rozwiązaniem do tworzenia nagłówków. Najczęściej jest ona połączona z Lato, otwartymi sansami i droidami.

3. Wyświetlacz Playfair.

Biorąc pod uwagę znaczącą wysokość X i małe elementy litra, wyświetlacz Playfair nadaje się również do pisania nagłówka, zwłaszcza jeśli miejsce jest ograniczone do niego. Łączy dobrze z Gruzją i często jest używany z Oswald, Lato i Arvo.

4. GT Walsheim.

Używane dziś w wielu blogach GT Walsheim jest przedstawiciel geometrycznych grotescas i jest zawarty w rodzinie Grilli typu. Za pełen zestaw Czcionki muszą zapłacić, ale typ Grilli oferuje bezpłatne wersja próbna GT Walsheim.

5. Merriweather.

Jeśli czytelność na ekranie jest priorytetem projektu, użyj Merriweather, który został stworzony w tym celu. Ponadto, ta czcionka jest stale sfinalizowana.

6. Josefin sans.

Josefin Sans został stworzony zgodnie z kanonami vintage w formie bufetu i charakteryzuje się eleganckimi estetykami geometrycznymi.

7. Gravitas.

Gravitas One został stworzony na podstawie "Fat Fat Face" - grubą czcionką reklamową, która pojawiła się podczas rewolucji przemysłowej w Anglii. To czcionka wygląda idealnie na średnią i dużą skalę i nadaje się do nagłówków, nazw i zakładek.

8. Jura.

Listery tej czcionki powtarzają formy pisania Kai-Lee. Zawiera również glify cyrylicy i alfabetu greckiego. Jest dostępny w jaskrawym, normalnym, środkowym i pogrlądającym.

9. Gothic League.

Początkowo zaprojektowany przez Maurice Bentona (Morris Fuller Benton) dla firmy American Type Founders Company w 1903 roku, Gothic League znalazł nową aplikację po aktualizacji i dodanie nowych glifów.

10. FIORD.

Fjord jest czcionką z serifami pierwotnie utworzonymi dla drukowanych książek, a szczególnie nadaje się do umieszczenia długich tekstów w małym formacie drukowania. Może być używany do stworzenia dużej ilości zawartość tekstu. Na stronie, ponieważ czcionka wyróżnia się przezroczystą strukturę, zauważalne serify i długie eleganckie górne i dolne zdalne elementy.

11. Amarant.

Rodzina czcionek Amarantów wyróżnia się niewiadomymi ramionami z małym kontrastem i zauważalnym zakrętami. Wszystkie trzy style Amarantów są dobrze łączone z niemal każdą inną czcionką. Możesz grać z tą czcionką - eksperymentować i wybrać najlepsze.

12. Poli.

Ta czcionka środkowa kontrastowa została pierwotnie stworzona dla języka ojczystego Wayunaiki, dla których potrzebne są szerokie glify. Wyróżnia się drobnymi zdalnymi elementami i dużym X-wysokim, co sprawia, że \u200b\u200bjest to szczególnie przydatne duże rozmiary.

13. Gentium Basic.

Ta czcionka została stworzona jako wieloczęściowy, który obejmuje listy łacińskie i greckie, a także wsparcie cyrylicy i zaawansowane w wersji Gentji Plus. Gentium Basic i Gentium Book Basic są dostępne w bezpłatnej wersji internetowej, ale są ograniczone tylko przez alfabet łaciński.

14. Otwórz sans.

Open Sans jest przedstawicielem humanistycznych groteskins. Ta czcionka wyróżnia się wysokim stopniem intensywności i przystosowany do obu stron i dla interfejsy mobilne. Jest to nieograniczona czcionka z prostą kratą, która charakteryzuje się neutralnym, ale dość przyjemnym widokiem, co pozwala mu używać w różnych celach.

15. Regularna księga

Jest to wielofunkcyjna czcionka o dużej wysokości X, silnym kontraście kolorów, jasno określonymi serifami, co przyczynia się do czytelności tekstu. Ta czcionka wygląda dobrze zarówno w druku, jak i na ekranie niskiej rozdzielczości.

16. Signika.

Ta darmowa czcionka internetowa jest przedstawicielem Groteskova. Niski kontrast i duża wysokość X pozwalają na signika na ekranie. Szeroki wybór ikon zawiera znaki, piktogramy i strzały.

17. Slab Josefin.

Utworzono zgodnie z kanonami czcionki geometrycznej, charakterystyczną dla 30-tych ubiegłego wieku, z dodatkiem skandynawskich cech, płyta czcionki Josefin ma charakterystykę czcionki barów i przypomina czcionkę drukowanej maszyny. Co ciekawe, jego x-wysokość jest połowa wysokości wielkiej litery.

18. Forum

Jak przyjęła nazwę, jest to rzymska czcionka, która jest dobra dla nagłówków duże litery.Ale nadaje się również do wyświetlania tekstu. Eleganckie proporcje tej czcionki przypominają klasyczną architekturę z półkolistymi łukami, poziomymi gzymsami i pionowymi kolumnami.

Nazwany na cześć jednego z najbardziej znanych miast Maya, Tikal Sans ma diabły glifów, które były używane w liście cywilizacji Południowej. Jego Stwórca wybrał dużą X-wysokość, która dała czcionkę nowoczesny wygląd i miał korzystny wpływ na jego inteligentność, a duży wybór rodzajów rysowania pozwala mu zastosować go do różnych celów.

20. Arvo.

Odpowiednio w równym stopniu do wersji drukowanej i WWW, ta czcionka barowa jest dostępna w Roman, kursywa, rzymskim odważnym i pogrubionym kursowym. Mały kontrast ARVO zwiększa jego czytelność na ekranie.

21. Bevan.

Bevan został stworzony na podstawie tradycyjnej czcionki barowej 30s. Litery były zalane, dali im nowy formularz i zoptymalizowali dla wersji internetowej. Jest to jedna z niewielu czcionek superhigh odpowiednich dla witryn.

22. Stary standardowy TT.

Stary standardowy TT został stworzony na podstawie czcionki z nowoczesnymi serifami, które było popularne pod koniec XIX i XX wieku, a następnie zapomniane przez długi czas. Czcionka ta nadaje się do dawania stylu specjalnego rodzaju treści, na przykład badań naukowych lub tekstów w języku greckim lub cyrylicznym.

23. Kreon.

Idealny do stron internetowych i blogów, ta czcionka z serifami ma również cechy czcionki barów, ale jej równowaga i nisko kontrastowa sprawiają, że Kreon jest znacznie bardziej spersonalizowany.

24. Droids sans.

Droid SANS został zoptymalizowany pod kątem maksymalnej czytelności nawet w małych interfejsach - na przykład menu na ekranach. telefony komórkowe. Jest to neutralna nieustronna czcionka z prostymi konturami litra.

25. Italiana.

Stwórca tej czcionki został zainspirowany klasyczną włoską kaligrafią, więc czcionka będzie bardzo przydatna dla projektów, w których konieczne jest dodanie elegancji. Italiana nadaje się również do pisania nagłówków wiadomości zarówno w formie drukowanej, jak i elektronicznej.

26. Volkkorn.

Ta szczegółowa zaprojektowana, wielofunkcyjna czcionka z serifami jest bardzo popularna. Jego jasność i dokładność wyraża pewność siebie i energię, co sprawia, że \u200b\u200bczcionka równie skuteczna zarówno w dużych rozmiarach dla nagłówków, jak i nazw oraz dla znaczących woluminów tekstowych w mniejszym formacie.

27. Aktor.

Czcionka ta charakteryzuje się szczególnie dużym X-wysokim, co wymaga wystarczającej przestrzeni. Aktor jest również charakterystyczny dla staromodnego rysunku niektórych znaków, na przykład liczb 6 i 9.

Humanistyczna czcionka Garamond jest prawdziwą ikoną typografii, która wielokrotnie służyła jako podstawa do tworzenia nowoczesnych czcionek, w tym czcionka EB Garamond.

31. Ubuntu.

Grotesque Ubuntu został stworzony w celu personalizacji tekstu WWW na komputerach stacjonarnych i urządzeń mobilnych. Użytkownicy są proszeni o eksperymentowanie z tym czcionką, modyfikować i poprawiają go według ich uznania.

32. Rosario.

Rosario jest klasycznym humanistycznym groteskiem, który jest idealny do stylizacji akapitów tekstowych.

33. Slab Roboto.

Roboto Slab jest jedną z czcionek rodziny Roboto. Wersja barowa szczególnie przyciąga wyglądami geometrycznymi kształtami i otwartymi zakrętami. Równie dobrze nadaje się do ekranów gadżetów i drukowanych wersji tekstów.

34. Oswald.

Czcionka jest poprawioną wersją klasycznego groteska alternatywnego gotyku. Oswald został niedawno zaktualizowany, teraz jest reprezentowany w różnych projektach, zawiera rozszerzony zestaw znaków i charakteryzuje się bardziej komfortowym przebiegłemu.

35. Pat.

Stalemate to elegancka czcionka odręczna z niektórym zabytkowym odcieniem. Nadaje się do tworzenia akcentów i personalizacji Twojej witryny.

36. Crimson Tekst.

Ta starannie zaprojektowana klasyczna czcionka proporcjonalna może być używana zarówno do wyświetlania dużych ilości tekstu i pisania tytułów.

W tym artykule, powiem ci, jak stworzyć własną czcionkę na stronę internetową za pomocą własnych zainstalowanych ikon. Wszystko, czego potrzebujesz, jest to program do tworzenia grafika wektorowa(Adobe Illustrator. lub inkspcape) i dostęp do Internetu! Więc wstawmy! Wszystkie używane obrazy, ikony i czcionki CSS można je pobrać na końcu artykułu.

Dla tej lekcji zrobimy coś prostego. Dla pierwszej ikony narysujemy konwencjonalną gwiazdkę. Na drugą ikonę - orła z literą w wewnątrz. Przyciągnij go łatwo i możesz tworzyć dowolne formularze i kombinacje. Użyłem ilustruktora do tych celów.

Po zakończeniu kreatywnej części - tworzenie należy zapisać w formacie SVG. Kliknij "Zapisz jako" i wybierz typ pliku jako SVG. Teraz możesz przejść bezpośrednio do stworzenia czcionki.

W tych celach korzystamy z popularnej i bezpłatnej usługi ICOMOON.

Pierwszą rzeczą do zrobienia jest utworzenie nowego projektu, więc kliknij menu w lewym górnym rogu i kliknij "Nowy projekt". Następnie robimy nasze gotowe pliki SVG. Po kliknięciu przycisku "Importuj ikony". Po wykonaniu tych kroków należy zobaczyć obraz tego rodzaju na moim monitorze:

Teraz mamy możliwość zmiany kodu dla każdej ikony (w naszym przypadku będzie E600 i E601), nazwiska naszej czcionki, prefiks dla CSS i tak dalej. Wszystko to prowadzi się w "Preferencjach". Możemy również zobaczyć czcionkę w akcji, kliknij link "Włącz szybki użytkowanie" - co pozwoli Ci uzyskać tymczasowy link do naszej czcionki, a także możliwość przeglądania kodu w kodepen.

Po skonfigurowaniu, naciśnij przycisk "Pobierz" na dole strony i pobierz archiwum. W tym archiwach znajdziesz czcionkę w formatach TTF, EOT, SVG i WOF + strona demonstracyjna z czcionką.

Używanie ikon na stronie

Teraz, wszystko, czego potrzebujemy, jest podłączenie czcionki CSS za pomocą @ font-face i określić inne parametry (wszystkie są one zapisane w pliku CSS w pobranym archiwum.

@ Font-face (font-family: "WDM-Eagle"; SRC: URL ("// YouurWebsiteName.com/fonts/wdm-eagle.eot"); (font-face: "WDM-Eagle"; Mów: Brak; Styl czcionki: Normalny; Waga czcionka: Normalna; Wariant czcionek: Normalny; Tekst transformacja: Brak; linia-wysokość: 1; / * Lepsza renderowanie czcionki \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / -Webkit-czcionki - wygładzanie: antalized; -moz-osx-font-font-wygładzanie: szarość;) .Wdm-star: Przed: "E600";) .Wdm-orła: wcześniej (treść: "E601";)

Teraz możemy użyć naszej czcionki w kodzie HTML w następujący sposób:

Określanie nazwy klasy do tagu Otrzymujemy naszą ikonę.

Dowiedziałem się o tym temacie wiele nowych rzeczy dla siebie. W szczególności dwa sposoby podłączenia czcionek, funkcji pracy usługa Google. Czcionki i numeryczne skale gęstości czcionek, zasoby do znalezienia bezpłatnych czcionek, subtelności pracy z generatorem fontsquirrela, ikony zasobów czcionek. Dla mnie informacje okazały się niezwykle przydatne i interesujące.

Poniżej przynoszę krótkie podsumowanie wszystkich pytań, które wydawały się interesujące dla mnie interesujące i nowe w mojej praktyce, rets przez własne słowa. Mam nadzieję, że ten materiał będzie przydatny nie tylko dla mnie sam.

Podłączanie czcionek internetowych za pomocą @ font-face:

podłączenie niestandardowej czcionki przy użyciu dyrektywy

Dyrektywa

Określa przeglądarkę, aby zastosować czcionkę określona nazwa Wybrane elementy strony.

Istnieje kilka formatów czcionek internetowych. Najczęściej: Eot, Woff, OTF lub TTF,

Format EOT., która jest rozumiana przez tj. Przeglądarki do wersji 8. Właściwie ten format czcionki jest tworzony i istnieje tylko ze względu na tę przeglądarkę i jego wersje. Aby uzyskać czcionkę formatu EOT, potrzebujesz specjalnego oprogramowanie Aby przekonwertować format TTF do Oet.

Format Woff. (Web Otwarty format czcionki) jest najlepsza do tej pory do użytku w Internecie: najmniejszy i łatwy, obsługiwany przez wszystkie nowoczesne przeglądarki (w tym IE9 i wyższe); Ten format został utworzony specjalnie dla sieci. W rzeczywistości jest to lekka wersja TTF lub OTF.

Formaty OTF. (Open Type Font) i TTF (True Type Font) są najczęstszymi czcionkami komputerowymi, które są używane w większości systemów operacyjnych (Windows, Macintosh, Linux) oraz w aplikacjach dla tych systemów. Ale dodatkowo, takie czcionki można łatwo wykorzystać w Internecie.

Format SVG. - nie jest nawet formatem czcionki, ale format graficzny, graficzny obraz. Funkcją tego formatu jest to, że grafika w tym formacie są tworzone wyłącznie za pomocą wektory, czyli formuł matematyczny.

Dzięki temu format ten jest skalowany bez utraty jakości - ze wzrostem rozmiaru obrazu, komputer wystarczy, aby ponownie obliczyć punkty wektorowe. Funkcja formatu grafiki pozwalała na zastosowanie go do tworzenia "czcionek". Oznacza to, że zwykła czcionka jest konwertowana na format SVG, gdzie każda czcionka jest w rzeczywistości obrazem w skalowalnym formacie SVG.

Dlaczego wymaga takich trudności? To jest to, że przeglądarki w systemie operacyjnym Android (bardzo wspólny system operacyjny urządzenia mobilne) Może wyświetlać czcionki internetowe tylko w tym formacie. Przeglądarki pod iPhone (Safari 4.1 i poniżej) nie wiedzą również, jak rozpoznać czcionkę internetową. To "starszy" i umieść zdjęcia w formie czcionek - "Nie możesz jeść zwykłego jedzenia, więc jeść przynajmniej!".

Prawna kwestia używania czcionek

Pytanie można krótko sformułować w następujących dwóch sugestiach. Wszystkie czcionki są podzielone na płatny lub wolny.

Płatny Czcionki są podzielone na te:

mogą Użyj do Internetu
to jest niemożliwe Użyj do Internetu

Aby nie przejmować się rozwiązaniem mylącego wydania licencji czcionek, możesz korzystać z usług internetowych Google Fonts. lub typekit, na którym wszystkie czcionki są montowane, który może być używany w sieci. Czcionki na tych serwerach wolny (Google Fonts.), zarówno płatny (Typekit).

Krótka lista Źródła darmowych czcionekMoże być używany w Internecie:

Fontsquirrel (http://www.fonstsquirrel.com/)
Google Fonts ( https://www.google.com/fonts.)
Otwarta biblioteka czcionki (http://openfontlibrary.org/en)
Fontex.org (http://fontex.org/)
Odlewnia Exljbris Font (http://www.exljbris.com/)

Większość usług internetowych, które zapewniają czcionki dla sieci: "Daj" ich w formacie OTF lub TTF. Dlatego konieczne jest przekonwertowanie tej czcionki do opisanych powyżej czterech formatów, dzięki czemu maksymalna liczba odwiedzających witryny może zobaczyć zawartość tej witryny na swoich urządzeniach. W przypadku konwersji nie musisz szukać specjalnego oprogramowania. Możesz użyć darmowy generator @ Generator Font-Face znajduje się na serwerze Fontsquirrel (http://www.fonstsquirrel.com/).

Jedynym ograniczeniem tej usługi jest - ma własną czarną listę, która jest umieszczona czcionki zabronione przez licencje do użytku w sieci. Innymi słowy, jeśli "poślizgnij" czcionka licencyjna nabyta metodą piratów, odmówi on wygenerowania tego ostatniego.

Generator

Ważne i powinny być następujące: @ Font-Face (Font-Face: "Ptsans"; SRC: URL ("PTSRegular.eot"); SRC: Format ("Embedded-Opentepe"), URL ("Ptsansregular.Woff") Format ("Woff"), adres URL ("PTSRegularny.TTF") Format ("TrueType"), adres URL ("PTSSRegularny.SVG") ("SVG");)

Eot. - Format tylko dla programu Internet Explorer 8 i poniżej
Woff. - Najnowocześniejsza i mała czcionka, która jest rozumiana przez większość nowoczesnych przeglądarek
TTF. - stosunkowo duża czcionka i przestarzała czcionka
Svg. - Największa i wielkość czcionki, więc musi być umieszczona w większości wiersza. Ponadto ten format czcionki jest używany tylko w przeglądarkach Android OS lub w przeglądarce Safari 4 ( to jest, iPhone)

Przeglądarka odczytuje treść dyrektywy

Jest nie-losowy i empirycznie zweryfikowany na podstawie doświadczenia poprzednich programistów internetowych. H1 (Rodzina czcionek: "Gothic League", Arial, Sans-Serif; Waga czcionek: Normalna;)

Właściwe wykorzystanie podłączonego gotyku w Web Font League. Tutaj jest wskazany w pierwszym miejscu nazwa podłączonej czcionki, a następnie - czcionki tworzenia kopii zapasowych, które są oczywiście zainstalowane w systemie użytkownika (Nazwa czcionek, gwarantowana w systemie i rodzinie czcionek).

Uważny czytelnik zwróci uwagę na drugą linię i mówi: jest tu lepszy, jakiś nonsens. W rzeczywistości, nie tak. Przeglądarki zawsze próbują domyślnie narysować nagłówki. Dlatego tutaj mówimy, że przeglądarka po prostu tego nie zrobiła i to jest.

Oprócz liter, czcionki mogą składać się z ikon lub obrazów. Zasoby dedykowane na temat ikon i odznak czcionek:

Rodzaje czcionek

Podczas podłączania czcionek zainstalowanych na komputerze zazwyczaj nie powstaje żadnych pytań i nie myślimy o tym, jak okaże się, że przy określaniu przeglądarki wyciągają tekst pogrubiony za pomocą tagu

Tekst jest naprawdę wykonany pod względem; i na pogrubionym kursie przez tagi

Silny em.

Wykonany jest w pogrubionej kursywie. Wydaje nam się, że przeglądarka wykonuje tekst, jak wskazamy mu.

W rzeczywistości nie jest. Lub nie tak. Przeglądarka naprawdę rysuje czcionkę określoną przez niego metodą, ale nie może nic zrobić z samą czcionką. Po prostu podejmuje napis czcionki wskazany przez tag i wyświetla go na ekranie. Faktem jest, że projektanci lub firmy zaangażowani w czcionki tworzą czcionki w ten sposób: artysta rysuje cztery zestawy tej samej czcionki. Oznacza to, że zestaw znaków jest narysowany w normalnym projekcie (regularny), wówczas narysowany zestaw znaków w starożytnym projekcie (kursywa), a następnie zestaw znaków półkolowych (pogrubionych) i wreszcie zestaw znaków w pogrubionym kursie ). Wszystkie te cztery zestawy znaków są rzeczywiście oddzielnymi czcionkami, chociaż noszą jedną wspólną nazwę (Gruzja, Tahoma, Helvetica i tak dalej).

Po określeniu przeglądarki, która jest stosowana, po prostu bierze czcionkę z określoną konstrukcją i wyświetla ją. Na przykład czcionka Arial ma cztery rodzaje rysowania. Jeśli jest wskazywany, że potrzebujesz pogrubionego szwu, przeglądarka bierze odważny skok arival. Sama przeglądarka przekształca jeden rysunek do innego nie może w żaden sposób. On może spełnić jedną rzecz - spróbuj wykonać i zwykły napis "znaczenie". Zespół mówi, że przeglądarka do spełnienia takiego zadania jest nazywany

Znacznie skomplikowane i mogą być wykonywane na dwa sposoby: prostyktóry IE8 nie rozumie (ale rozumie wszystkie inne przeglądarki) i złożonyktóre będą dostępne i IE8.

Łatwy sposób podłączenia czcionki internetowej

Prosty sposób podsumowuje w celu dodania do dyrektywy

A niniejsze zasady wykonują inną rolę, wymuszają przeglądarkę do przesłania czcionki internetowej z określonym stylem i grubością. Aby być bardziej zrozumiałym, natychmiast damy połączeniu czcionki WWW PTSANS z czterema opcjami na jej wyświetlaczu: @ font-face (czcionka: "PTSANS"; SRC: URL ("PTSRegular.eot"); SRC: uRL ("ptsansregular.eot # ifix") Format ("Embedded-OpenType"), adres URL ("Ptsansregular.Woff") Format ("Woff"), adres URL ("Ptsansregular.TTF") Format ("TrueType"), adres URL ("Ptsansregular.svg") Format (" SVG "); Czcionka: Normalna; Styl czcionki: normalny; ) @ font-face (czcionka: "PTSANS"; SRC: URL ("PTSSITALIC.EOT"); SRC: Adres URL ("Ptsansitalic.eot # Ifix" Format ("Embedded-OpenType"), URL ("PtsSwitalu") .Woff ") Format (" Woff "), adres URL (" PTSSITALIC.TTF ") Format (" TrueType "), adres URL (" PTSSITITIC.SVG ") Format (" SVG "); Waga czcionka: Normalna; Font-Stylelele : italic;) @ font-face (font-face: "PTSANS"; SRC: URL ("PTSANSBOLD.Eot"); SRC: Adres URL ("Ptsansbold.eot # IIfiks") Format ("Embedded-OpenType"), URL ("Ptsansbold.Woff" Format ("Woff"), adres URL ("PTSSBOLD.TTF") Format ("TrueType"), URL ("PTSSBOLD.SVG") Format ("SVG"); Waga czcionki: pogrubienie; Styl czcionki: normalny;) @ font-face (font-face: "PTSANS"; SRC: URL ("PTSBolditalic.eot"); SRC: Format ("Embedded-OpenType"), URL ("Ptssbolditalic.woof") Format ("Woff"), adres URL ("Ptsansboldititalic.ttf") Format ("TrueType"), adres URL ("PTSSBOLDITITIC.SVG") Format ("SVG"); Waga czcionka: pogrubienie;

Powiem ci, jak rozumiem zasady CSS. Dyrektywa

. Ta zmienna jest tablicą wypełnioną wartościami przy użyciu kolejnych reguł:

- Pobierz czcionkę określonego tłuszczu;
Wykonano za każdym razem, gdy oddzielna funkcja wywołania do wybranej strony elementy: P (Font-Face: PTSANS;)
A następnie tagi HTML
Określ, który układanie czcionek do zastosowania do określonych elementów: Dolor ETS< strong > Lorem Ipsum Dolor Ets Lorem Ipsum Ipsum Dolor Ets Lorem Ipsum< em > Dolor Ets Lorem Ipsum Dolor ETS LOREM IPSUM Dolor ETS
Przeglądarka "wyciągnie" z tablicy PTSANS czcionki pożądanego napisu (odważne lub kursywa lub pogrubienie kursywa) i stosuje go do określonych elementów strony.

Korzyść ta metoda Connections Web Font to jego wszechstronność. Wystarczy zadeklarować czcionkę za pomocą dyrektywy.
i.
W tych miejscach, w których stosuje się znaczniki
Przeglądarka IE8 zostanie wykonana z czcionki czcionki PTSANS. Przykład opcji połączenia czcionek Web dla IE8 jest pokazany poniżej: @ font-face (czcionka: "PTSANSERegular"; SRC: URL ("PTSRegular.eot"); SRC: uRL ("ptsansregular.eot # ifix") Format ("Embedded-OpenType"), adres URL ("Ptsansregular.Woff") Format ("Woff"), adres URL ("Ptsansregular.TTF") Format ("TrueType"), adres URL ("Ptsansregular.svg") Format (" SVG "); ) @ Font-Face (Font-Face: "PTSSITALIC"; SRC: URL ("PTSSITALIC.EOT"); SRC: URL ("PTSSITALIC.EOT # IFIX" Format ("Embedded-OpenType"), URL ("PTSSSITALIC .Woff ") Format (" Woff "), adres URL (" PTSSITALIC.TTF ") Format (" TrueType "), adres URL (" PTSSITIC.SVG ") Format (" SVG ");) @ font-face (czcionka : "PTSANSBOLD"; SRC: URL ("PTSANSBOLD.Eot"); SRC: Adres URL ("Ptsansbold.eot # IFIX") Format ("Embedded-Opentepe"), URL ("PTSSBOLD.WOFF") Format ("Woff" ), Format URL ("PTSSBOLD.TTF") ("TrueType"), adres URL ("PTSSBOLD.SVG") Format ("SVG");) @ font-face (czcionka: "PTSANBOldital"; SRC: URL (URL ( "Ptssbolditalic.eot"); src: uRL ("PTSSBOLDITITITITITIC.EOT # IIFIX") Format ("Embedded-OpenType"), URL ("PTSSBOLTITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITITATITITIF" (format formatu "" Ptsansboltic.woof ") (" Woff "), adres URL (" Ptsansbolditic.ttf ") SVG "); )
Zwróć uwagę na brak zasad
i? Ile w tym przypadku "pęcznienia" arkusze stylów! A jeśli nagle (brożenie Bogu!) Czy musisz wprowadzić zmiany w takim kodzie? P (Font-Face: PtsansRegular; Waga czcionka: Normalna; Font-Italic: Normalny; Rozmiar czcionki: 36px;) P DIFTG (czcionka (czcionka: PTSANSBOLD; Waga czcionka: pogrubienie; czcionka-kurska: Normalna;) P Em (czcionka-twarz: PTSSwitalic; Waga czcionki: Normalna; Font-Italic: Italic;) P SILLCRO EM (czcionka: Ptsansboldalic; czcionka: Bold; Font-Italic: Italic;)
Zastosuj lub nie stosować drugiej metody łączenia czcionek internetowych, jest pytanie o to, ile IE8 jest potrzebne dla konkretnego miejsca. Należy zauważyć, że udział IE8 spadnie i będzie nadal spada.

Czcionki Google Google.

Nie przejmować się wyszukiwaniem czcionki, pobierając go w formacie TTF lub OTF, konwersję na generatorze typu Generator Fontsquirrel, podłączyć odebrane style CSS do projektu za pomocą wielu dyrektyw
Drugi sposób korzystający z dyrektywy jest bardziej zwięzły - wystarczy podłączyć go do górnej części tabel stylów, dzięki czemu wybrane czcionki będą miały zastosowanie do wszystkich stron HTML.
Trzeci sposób Z JavaScript oprócz trudności, żadne inne zalety ponad dwóch innych nie ma.

W Google Gęstość czcionki nie jest oznaczona przez słowa kluczowe
oraz w skali liczbowej - 100 do 900. Wartość 400 odpowiada czcionki Gentium książki Podstawowa normalna gęstość średnia napis: EM (Font-Family: "Gentium Book Basic", Serif; Waga czcionka: 400; czcionka -styl: kursywy;)
Na tym klipie kończy się czcionki internetowe.

Prezentujemy Ci wybór darmowych usług dla projektanta. Jest to pierwsza opcja, w przyszłości planujemy rozszerzyć, dodając nowe sekcje i narzędzia.

Czcionki

Google Fonts - Cała ulubiona biblioteka czcionek. Umożliwia wybór i pobieranie różnych czcionek na wszystkie okazje.
1001 Darmowe czcionki - Biblioteka czcionek. Posiada wygodną nawigację - czcionki są sortowane zarówno alfabetycznie, jak i według typu. Istnieje część rosyjskich czcionek.
Fontstructor - projektant czcionek online. Bardzo proste narzędzie pozwoli Ci stworzyć własną czcionkę. Możesz narysować nie tylko standardowe kwadraty, ale także przez inne figury - punkty, zaokrąglone rogi I tak dalej dla początkujących doskonałych narzędzi, aby spróbować zobaczyć typografię w akcji.
Squirrel Font jest jednym z największych bibliotek czcionek. Ponadto można pobrać rysunek i otrzymać nazwy czcionek używanych na nim. Jest sklep z czcionkami, a nawet sklep z odzieżą z logo.
Typ Light - Pełna funkcja Edytor czcionek. Umożliwia tworzenie, edytowanie i przekonwertowanie czcionek Openmentpe, TrueType i PostScript. Musisz pobrać i zainstalować. Bezpłatna wersja ma ograniczoną funkcjonalną w porównaniu do bezpłatnego. Ale stworzyć prosta czcionka chwytaki.
Jaka jest czcionka - serwis internetowy Aby wybrać czcionki witryny. Pobieramy plik czcionki, określić adres URL witryny i pozostaw, ponieważ pobrana czcionka będzie wyglądać na stronie. Wygodna usługa.
1001 czcionek - biblioteka czcionek (ponad 15000). Wygodna nawigacja - czcionka może być wybrana według rozmiaru, typu, tematu, projektu itp. Menu umożliwia skonfigurowanie wyjścia, co umożliwia wyświetlenie każdej czcionki w różnych opcjach: rozmiar, rysunek itp.
Font Flame - Online Selection Service Pary łączy czcionki. Działa bardzo proste - na strona główna Proponuje się lips z dwoma napisami wykonanymi przez różne czcionki. Lubiłem to - naciśnij "Miłość", nie - "Nienawiść". Następnie wybrany może być wyświetlany ponownie. Kliknij nazwę czcionki otwiera czcionki Google.
TypeCast - wybór czcionek do prototypu. Możesz zobaczyć, jak czcionka będzie wyglądać na dowolne urządzenia. Konieczne jest wyznaczenie różnych typów tekstu - nagłówki, cytaty itp. Możesz wybrać zestaw słuchawkowy, rozmiar, napis, wyznaczone wcięcia. Zobaczysz swoją przyszłą stronę w tych czcionkach zainstalowanych. Big Plus - Wybierz układ (jedna kolumna lub kilka, różnych lokalizacji bloków).
Wordmark - Umożliwia wybranie czcionki zainstalowanej na komputerze użytkownika, dla tekstu, logo lub nagłówka. Podczas wprowadzania tekstu w polu pokazuje go w różnych czcionkach. Możesz wybrać rozmiar, rejestr, wyświetlacz czarno-biały lub odwrotnie. Większość opcji jest publikowana w trójnikowym lub na Facebooku - wybierając użytkownika. Możesz wysłać do wiadomości e-mail.

Strumienie zdjęć

Nieodpłatny - stale uzupełniany pień fotografia. Kolekcje są podzielone na tematy. Możesz znaleźć wszystko, od "Afroamerykanów" do "Nature". Każde zdjęcie ma własną ocenę, można zobaczyć najlepsze lub nowości.
Foodiesfeed - Zdjęcie jedzenia. Obrazy są uszkodzone według kategorii. Możesz wybrać najlepsze, ekskluzywne, ikony, mokape itp.
Darmowe zdjęcia Refne to ogromna lista obrazów "prawdziwych życia". Głównie krajobraz i fotografie natury. Niewygodna nawigacja, wszystkie zdjęcia na stronie głównej pojawiają się podczas przewijania.
Małe wizualne - wysokiej jakości zdjęcia krajobrazów i budynków. Możesz pobrać archiwum najlepsze zdjęciaOpublikowany na tydzień. Zdjęcia są oznaczone hashtagami, ale nie zepsute według kategorii.
Gryzisografia - ogromna biblioteka darmowych zdjęć. Wszystkie zdjęcia są zepsute na sześciu tematach: ludzie, grymasy, miasta, przedmioty, przyroda i zwierzęta. Możesz wyszukiwać słowa.
Śmierć na zdjęcie - zdjęcia stockowe. Wystarczy wyglądać i wybrać, nie może. Wykonują wybór na miesiąc i podaj go do pobrania po wprowadzeniu wiadomości e-mail. Archiwum waży około 11 MB. Najlepsze zdjęcia i link do pobrania są wysyłane do poczty.
Superfamous - duża kolekcja zdjęć z niezwykłego kąta. Zestaw małych, ale interesujących.
Biblioteka wzoru - szablony i tekstury. Zestaw jest wystarczająco duży, szablony są niezwykłe. Przewiń jest wymieniany i stopniowo. Możesz zobaczyć, jak szablon będzie wyglądał na pełny ekran lub ze swojej strony.
Nowe stare zapasy - Vintage zdjęcia z archiwów. Darmowe zdjęcia Niewiele, ale nowe niedawno pojawiają się.
Pexels - duża liczba zdjęć na wszystkie okazje. Na podstawie tematów jest bardzo wygodny do wyszukiwania.
Jay Mantri to duży zestaw zdjęć. Klasyfikacje nie są dostępne, możesz zobaczyć przez miesiące.

Strumienie grafiki.

Brusheezy - Darmowe pędzle, szablony, tekstury i tak dalej do Photoshopa. 12 kategorii w każdym z nich podkategorii. Wybór jest ogromny.
Iconfinder - ikony, zarówno opłacane, jak i wolni. Możesz pobrać w formatach ICO, PNG, ICNS, SVG.
Brushez to duża kolekcja pędzli do Photoshopa. Oprócz ich, nadal istnieją wektorowe prymitywy, kształty, wzory, style. Każda sekcja jest podzielona na podsekcje. Na przykład, dla szczotek więcej niż 20 kategorii.
Vecterzy - grafika wektorowa bibilopa, w tym obrazy i ilustracje. Duża liczba kategorii i ogromna grafika.
Iconbird - Ikony wyszukiwania usługi rosyjskojęzyczne. Możesz wprowadzić ten temat i uzyskać zestaw ikon i można je oglądać według kategorii.
Ikony8 to usługa rosyjskojęzyczna oferująca ponad 42 000 ikon na różnych tematach.

Infografika.

Vizualize - usługa online tworzenia infografiki "o sobie". W istocie tworzy podsumowanie graficzne.
Canva to proste narzędzie do tworzenia dowolnego projektu. Pozwala na prezentację, plakat, wpis w sieciach społecznościowych, książek, literach, materiałach i innych. Wszystko odbywa się na podstawie szablonów, zmiany tekstu. Ale jest wiele szablonów, jest z tego, co wybrać.
Łatwiej - tworzenie infografiki na podstawie szablonów. Wbudowany edytor online Umożliwia zmianę projektu, umieścić dodatkowe koła zębate, zmień tekst.
Infogogram - Usługa online do tworzenia infografiki i interaktywnych diagramów. Nie wszystkie funkcje są dostępne, musisz kupić konto.
Visage to proste narzędzie do tworzenia dowolnej zawartości wizualnej (wykres, infografiki, obrazy na blog itp.). Wiele szablonów, prosty edytor. Niektóre funkcje są wypłacane.
Usługa Gliffy - Online, aby utworzyć wykresy. Redaktor jest ważny w zasadzie Microsoft Visio.
Visme - narzędzie online do tworzenia prezentacji i infografiki. Ponad 1000 szablonów. Edytor umożliwia dodawanie tekstu (nagłówki, listy, cytaty i normalne), animowany tekst i widżety. Na wolnym koncie możesz pobrać jako plik JPG.
Piktochart - Tworzenie wysokiej jakości grafiki - prezentacje, infografiki lub materiał do drukowania. PNG, JPG o różnych rozmiarach jest rozładowany.
Drawio to wygodna usługa online, aby utworzyć wykresy. Możesz zapisać w Dropbox i podobnych usługach, można jeździć.
Vennngage - proste tworzenie infografiki, plakatów, raportów, materiałów do sieci społecznościowych itp. darmowa wersja Daje tylko odniesienie do publikacji. Do pobrania musisz zapłacić.
Usługa Cacoo -online do rysowania diagramów i kart witrynowych. Być może najlepszy możliwy. Duża liczba narzędzi i szablonów. Możesz eksportować w PNG, PDF, SVG, PPT itp.
Stawely - usługa rysowania diagramu online. Dostępne tylko do publikacji. Pobieranie płatne.
Lucidchart - online tworzy wykresy i rysunki. Możliwe jest importowanie wykresu Microsoft Visio. Wyeksportowany do PDF, PNG i JPG. Istnieje płatna funkcjonalność.

Zabarwienie

Color Hunt - Wybór kombinacji kolorów. Możesz wybrać do czterech kolorów. jest gotowe rozwiązania Wybrać.
Tineye - analizuje witrynę i wyświetla listę zasobów, na których używany jest zdjęcie z witryny.
Colorozilla - umożliwia tworzenie kolorów i gradientów. Wyświetla dla nich właściwości CSS.
Adobe Color CC - tworzenie schematów kolorów.
Collecious - Naciśnij spację i wygeneruj nowy kolor.
Kolorcheme - wybór schematów kolorów. W języku angielskim i rosyjskim jest wersja. Umożliwia podnoszenie kolorów na stronie. Ma dokładne ustawienie, pokazuje kod koloru. Ostatecznie umożliwia przeglądanie strony w wybranym schemacie kolorów. Największym plusem jest widok gamma pod względem odchylenia kolorów. Pozwala również wybrać różne modele kolorów. Zapisuje się w Gimp, CSS, palecie PNG itp. Ma konwerter kolorów do tłumaczenia z jednego modelu koloru do drugiego.
Paletton to narzędzie do tworzenia kombinacji kolorów. Nie różni się od Colorcheme.
Pascusulous - analizuje paletę obrazy png., Jpg lub gif. Załaduj obraz i zdobądź zestaw wszystkich kolorów, które są obecne.
Narzędzie Kolorowe Hex - narzędzie do wyboru kolorów. Suwak jest skonfigurowany kolor, możesz wybrać jasność. Następnie wybrany kolor jest zapisany. Możesz wybrać palety.
(UN) CLRD - wtyczka przeglądarki, która usuwa wszystkie kolory i pozostawia miejsce w czerni i bieli.
BrandColory - największa kolekcja oficjalnych marki kody kolorów.. Wybierz nazwę marki i pobierz nazwy swoich kolorów, w tym w pliku CSS.
Colortyper - wybór kolorów z niezwykłego kąta. Na ekranie pokazuje wielokolorowe znaki, które przecinają się. Wynik przecięcia jest nowy kolor. To wygląda interesująco.

Inspiracja

Dribbble jest najliczniejszą społecznością projektantów. Praca, społeczność, komunikacja - tutaj możesz znaleźć wszystko.
FreeBble - Szablony i projekty z Dribble'a. Coś można pobrać za darmo, coś do kupienia. Możesz znaleźć szablony dla CMS, projektantów, ikon, mokapy, szykownych szablonów witryn i wiele więcej.
Muzli - codzienna inspiracja projektu. Zasób dla projektantów z przykładami najbardziej niezwykłej pracy.
Awwwards - najlepsze projekty projektowe. Zorganizowany jako społeczność, w której możesz głosować na witrynę. Witryna dnia, miesiąca, rok itp. Wybrano dużą liczbę projektów, wideo, rozwój.
Zaprojektuj, że ufasz - społeczności projektantów, wspólnie korzystając z najnowszych trendów, wiadomości, portfolio, wzorów i kreatywnych ogłoszeń.
Naprawdę dobre e-maile to ogromna kolekcja dobrze rozwiniętych wiadomości e-mail. Wybierz szablon i zdobądź to kod HTML, CSS i JS. Możesz zmienić tekst, rysunki itp.
FUBBIZ - publikacje z obszaru projektowania i kreatywności. Możesz znaleźć zdjęcia, projektowanie, grafiki, wideo itp. Wszystko jest uszkodzone według kategorii.
DesignSpiracja - Kolekcja wzorów w stylu Pinterest. Ogromna liczba pomysłów i przykładów to typografia, logo, litery i wiele więcej.
Behance - zbiór portfela od profesjonalistów. Możesz zostawić wakat lub podsumowanie.
Mobile-Wzory - Biblioteka z ekranami IOS i Android. Wszystko jest podzielone przez sekcje. Możesz znaleźć wiele pomysłów.
Jedna strona miłość - Galeria najlepszych projektów stron internetowych. Możesz kupić szablony i tematy. Są bezpłatne.
Uispace - zasób dla projektantów. Możesz pobrać PSD, szkic, czcionki, mokape itp. Za darmo.

Edytor graficzny

DAZ 3D - modelowanie 3D. Zarejestruj się i pobierz aplikację deskozową.
Gimp jest darmowym analogiem Photoshopa. Umożliwia skonfigurowanie modułowej siatki, tworzyć prowadnice, pracy z warstwami, dodaj efekty itp. Jest to dobra wymiana Photoshopa. Jest rozszerzalny - możesz pobrać dodatkowe wtyczki.
Blender - modelowanie 3D, animacja, renderowanie, dźwięk, wideo. Umożliwia tworzenie gier. Szybko rozwijający się edytor jest bardzo popularny.
Powierzchnia - usługa edycji zdjęć online. Wiele funkcji, w tym "efekt czerwonych oczu", zmienia rozmiar itp.
Pixlr - Edytor zdjęć online i edytor grafiki oddzielnie. Ten ostatni wygląda jak Photoshop. Zapisuje dysk.
Begunky - online usługa edycji zdjęć. Efekty, ramki, grafika, retuszowanie i inne. Istnieje interfejs rosyjskojęzyczny.
Inkscape - Pełny edytor graficzny edytora z otwartym kod źródłowy. Obsługuje możliwości format SVG. - Pracuj z figurami, konturami, tekstem, wektoryzacją grafika rastrowa i in. Z wyjątkiem przetwarzania obrazy wektorowe, Pozwala na utworzenie szablonu witryny i przeciąć - obecny jest modułowa siatka. Umożliwia wyciągnięcie tła, banerów, logo wektorów itp.
IconaDit2 to bardzo prosty program do rysowania ikon. Ma filtry. Umożliwia eksportowanie obrazu na Androida i Apple. Możesz dostosować głębokość koloru, obróć i dostosować ikonę. Obsługuje przezroczystość, wiele zdjęć w jeden plik ICO i wygładzający we wszystkich narzędziach rysunkowych.
Falco Gif Animator to program tworzenia animacji próbki i animowanych ikon. W zasobach możesz pobrać wiele różnych programów.
Krita jest profesjonalnym edytorem pulpitu Open Source. Dostępne dla różnych systemu operacyjnego.
Boxy-SVG - edytor graficzny wektor podobny do Adobe Illustrator, szkic i inkscape.
Fotopos - program wielofunkcyjny, z funkcjami edytora zdjęć, edytor graficzny i aplikacje do tworzenia grafiki komputerowej.
5dfly - darmowa aplikacja Obróbka zdjęć wsadowych. Tworzenie pokazu slajdów pod PowerPoint. Oddzielnie można pobrać konwerter w PDF.
Paintstar - bezpłatny edytor Obrazy. Interfejs jest bardzo podobny do farby, ale więcej możliwości. Na przykład warstwy.
Photoscape - prosty edytor zdjęć. Posiada funkcje jasności i konfiguracji kolorów, balans bieli, korekcja podświetlenia, ramki, balony, tryb mozaiki, dodaj tekst, rysunek obrazu, przycinanie, filtry, usuwanie efektu czerwonych oczu, kolor, pędzla, klonowa marka, pędzel efekt itp.

Dzwon.