eGospodarka.pl
wiadomość od św. Mikołaja

eGospodarka.plGrupypl.comp.www › W jaki sposób osadzane są glify na stronach WWW?
Ilość wypowiedzi w tym wątku: 21

  • 1. Data: 2018-04-06 14:14:15
    Temat: W jaki sposób osadzane są glify na stronach WWW?
    Od: Marek S <p...@s...com>

    Witam,

    Mamy np. material icons Googla. Fonty umieszczamy na stronie za pomocą:

    <tag class="material-icons">nazwa</tag>

    W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
    tego ani selektorów CSS ani kodu JS.

    --
    Pozdrawiam,
    Marek


  • 2. Data: 2018-04-07 14:34:56
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: satellite <s...@g...com>

    On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:

    > W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do

    to ligatury


  • 3. Data: 2018-04-07 20:06:59
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Marek S <p...@s...com>

    W dniu 2018-04-07 o 14:34, satellite pisze:
    > On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
    >
    >> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
    >
    > to ligatury
    >

    Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub
    jakąkolwiek inną z poniższego zbioru?

    https://material.io/icons/

    Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz
    czcionka. Każdy obrazek to jeden znak.

    Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
    sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
    tagu w konkretny znak?

    --
    Pozdrawiam,
    Marek


  • 4. Data: 2018-04-10 00:38:53
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Sat, 7 Apr 2018 20:06:59 +0200, Marek S napisał(a):

    > Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
    > sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
    > tagu w konkretny znak?

    Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku korzystasz z
    ligatury "android":

    https://github.com/google/material-design-icons/blob
    /master/iconfont/codepoints
    http://alistapart.com/article/the-era-of-symbol-font
    s

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 5. Data: 2018-04-10 09:24:02
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Marek S <p...@s...com>

    W dniu 10.04.2018 o 00:38, Borys Pogoreło pisze:

    >
    > Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku korzystasz z
    > ligatury "android":

    Tak, to wiem. Tylko za diabła nie wiem w jaki sposób tag:

    <tag class="material-icons">nazwa</tag>

    konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod
    literą A kryła się ikona androida a pod B ikona Apple w danym foncie.
    Natomiast nie rozumiem w jaki sposób ciąg znaków zamieniany jest na
    jeden znak. W tym przypadku ciągiem znaków jest "nazwa".

    --
    Pozdrawiam,
    Marek


  • 6. Data: 2018-04-10 14:22:38
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Tomek <s...@w...xxx.pl>

    W dniu 10.04.2018 o 09:24, Marek S pisze:
    > W dniu 10.04.2018 o 00:38, Borys Pogoreło pisze:
    >
    >>
    >> Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku
    >> korzystasz z
    >> ligatury "android":
    >
    > Tak, to wiem. Tylko za diabła nie wiem w jaki sposób tag:
    >
    > <tag class="material-icons">nazwa</tag>
    >
    > konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod
    > literą A kryła się ikona androida a pod B ikona Apple w danym foncie.
    > Natomiast nie rozumiem w jaki sposób ciąg znaków zamieniany jest na
    > jeden znak. W tym przypadku ciągiem znaków jest "nazwa".
    >

    Pod spodem fragment jak to jest zrobione w fontawesome.
    Podobnie jest w bootstrapie i innych.

    np:
    <span class="fa fa-flag"></span>
    i widzisz flagę

    ----------------------------------------------------
    --------

    @font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0
    ')
    format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontaw
    esomeregular')
    format('svg');
    font-weight: normal;
    font-style: normal;
    }
    .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    [...]

    .fa-flag:before {
    content: "\f024";
    }
    .fa-headphones:before {
    content: "\f025";
    }
    .fa-volume-off:before {
    content: "\f026";
    }
    .fa-volume-down:before {
    content: "\f027";
    }
    .fa-volume-up:before {
    content: "\f028";
    }


  • 7. Data: 2018-04-10 19:21:38
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Marek S <p...@s...com>

    W dniu 2018-04-10 o 14:22, Tomek pisze:

    > Pod spodem fragment jak to jest zrobione w fontawesome.
    > Podobnie jest w bootstrapie i innych.
    >
    > np:
    > <span class="fa fa-flag"></span>
    > i widzisz flagę

    Nie rozumiem w czym rzecz bo cały czas dochodzi do nieporozumień. Być
    może ja czegoś nie ogarniam.

    W przykładzie jaki pokazuje masz CSS, który tą falgę wyświetla. Klasa
    nazywa się fa-flag i sam ją cytujesz:

    .fa-flag:before {
    content: "\f024";
    }

    A teraz spróbuj ostylować coś takiego:

    <span class="fa">fa_flag</span>

    aby wyświetlić tą samą flagę. A następnie zmień ciąg znaków:

    <span class="fa">fa_volume_off</span>

    by wyświetlić "mute". Jak tego dokonasz?

    --
    Pozdrawiam,
    Marek


  • 8. Data: 2018-04-11 09:51:08
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Tomek <s...@w...xxx.pl>

    W dniu 07.04.2018 o 20:06, Marek S pisze:
    > W dniu 2018-04-07 o 14:34, satellite pisze:
    >> On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
    >>
    >>> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
    >>
    >> to ligatury
    >>
    >
    > Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub
    > jakąkolwiek inną z poniższego zbioru?
    >
    > https://material.io/icons/
    >
    > Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz
    > czcionka. Każdy obrazek to jeden znak.
    >
    > Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki
    > sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w
    > tagu w konkretny znak?
    >


    Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5 min.

    http://google.github.io/material-design-icons/#icon-
    font-for-the-web
    http://alistapart.com/article/the-era-of-symbol-font
    s


  • 9. Data: 2018-04-11 10:16:30
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Marek S <p...@s...com>

    W dniu 11.04.2018 o 09:51, Tomek pisze:

    >
    > Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5
    > min.

    W linku jaki dałem nie ma informacji na poruszony temat. Nie zadawałabym
    pytania na forum gdyby tam była odpowiedź.

    Ponadto gdybyś odpowiedział mi wprost jak odbywa się konwersja ciągu
    znaków w pojedynczy znak, to zajęłoby to Tobie mniej czasu niż takie
    komentarze.

    > http://alistapart.com/article/the-era-of-symbol-font
    s

    Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu
    znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?

    --
    Pozdrawiam,
    Marek


  • 10. Data: 2018-04-11 10:57:59
    Temat: Re: W jaki sposób osadzane są glify na stronach WWW?
    Od: Tomek <s...@w...xxx.pl>

    W dniu 11.04.2018 o 10:16, Marek S pisze:
    > W dniu 11.04.2018 o 09:51, Tomek pisze:
    >
    >>Nie zadawałabym pytania na forum gdyby tam była odpowiedź.
    >

    Linki, które podałem i gdzie jest odpowiedź na Twoje pytania
    znalazłem wyłącznie sprawdzając link, który sam przysłałeś.
    Nie użyłem wyszukiwarki.


    > Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu
    > znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?
    >

    O takim nowym mechanizmie to ja się dowiedziałem też dopiero dzisiaj i
    za bardzo tego nie testowałem.

    Cały czas można użyć starego mechanizmu
    np
    <i class="material-icons">&#xE87C;</i>


    Skopiowane z linków, które podałem wcześniej
    ----------------------------------------------------
    --------------------


    Using the icons in HTML

    It's easy to incorporate icons into your web page. Here's a small example:
    face
    <i class="material-icons">face</i>

    This example uses a typographic feature called ligatures, which allows
    rendering of an icon glyph simply by using its textual name. The
    replacement is done automatically by the web browser and provides more
    readable code than the equivalent numeric character reference.

    This feature is supported in most modern browsers on both desktop and
    mobile devices.
    Browser Version supporting ligatures
    Google Chrome 11
    Mozilla Firefox 3.5
    Apple Safari 5
    Microsoft IE 10
    Opera 15
    Apple MobileSafari iOS 4.2
    Android Browser 3.0

    For browsers that do not support ligatures, fall back to specifying the
    icons using numeric character references like the example below:
    ?
    <i class="material-icons">&#xE87C;</i>

    Find both the icon names and codepoints on the material icons library by
    selecting any icon and opening the icon font panel. A codepoints index
    is also available on our git repository which shows the complete set of
    names and character codes.

strony : [ 1 ] . 2 . 3



Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo:

Ok, rozumiem Strona wykorzystuje pliki cookies w celu prawidłowego jej działania oraz korzystania z narzędzi analitycznych, reklamowych, marketingowych i społecznościowych. Szczegóły znajdują się w Polityce Prywatności. Dalsze korzystanie ze strony oznacza, że zgadzasz się na ich użycie. Jeśli nie chcesz, aby pliki cookies były zapisywane w pamięci Twojego urządzenia, możesz to zmienić za pomocą ustawień przeglądarki.