Czcionki w Firefox 59 i Internet Explorer 10 w Windows 8

0

Właśnie próbuję napisać skrypt służący do wyświetlania czcionek. Ostateczny projekt ma wykorzystywać tabele i służyć do wyświetlania próbek czcionek zainstalowanych w systemie.

Udało mi się przygotować taki test

<html>
 <head>
  <meta charset="UTF-8" />
 </head>
 <body>
  <script type="text/javascript">
   function Test()
   {
    var Tbl = document.getElementById("UniTable");

    var FontName = "Arial";
    var FontSize = "20";
    Tbl.rows[0].cells[0].style = "font-family:'" + FontName + "'; font-size:" + FontSize + "pt;";

    FontName = "Courier";
    FontSize = "30";
    Tbl.rows[0].cells[1].style = "font-family:'" + FontName + "'; font-size:" + FontSize + "pt;";

    FontName = "Times";
    FontSize = "40";
    Tbl.rows[0].cells[2].style = "font-family:'" + FontName + "'; font-size:" + FontSize + "pt;";
   }
  </script>
  <p style="font-family:Courier;font-size:10pt;">Courier</p>
  <p style="font-family:Symbol;font-size:10pt;">Symbol</p>
  <p style="font-family:Webdings;font-size:10pt;">Webdings</p>

  <table id="UniTable" border="1">
   <tr><td>Arial 20</td><td>Courier 30</td><td>Times 40</td></tr>
  </table>
  <input type="button" value="Font" onClick="Test()" />
 </body>
</html>

Testuję na Windows 8, Internet Explorer 10 i Firefox 59. Problem polega na tym, że czcionki składające się z samych symboli w miejscu liter wyświetlają się poprawnie tylko w IE, a w FF wyświetlają się zwykłe znaki tak, jakby nie było tej czcionki. Natomiast zmiana czcionki w tabeli (po kliknięciu przycisku "Font") działa poprawnie tylko w FF, a w IE nic się nie zmienia, tak, jakby nadawanie stylu w skrypcie JS nie działało.

Co robię nie tak i jak zapewnić w pełni poprawne działanie tego skryptu w obu przeglądarkach?

0

Czy wyświetla się jakiś komunikat w konsoli IE?
Czy próbowałeś wyczyścić pamięć cache w FF?
Czy jak zmieniasz czcionkę skryptem, to czcionki-symbole w FF nadal nie zmieniają się?
Może masz jakieś dodatki w FF zainstalowane (niekoniecznie nawet włączone)? Albo także jakieś dodatki w IE? (Nie wiem, czy jakieś w ogóle są, dlatego pytam). Spróbuj uruchomić FF w safe mode oraz tak samo IE, jeśli ma coś takiego.
Spróbuj znaleźć wersje online tych czcionek i je podłączyć do projektu. Może czcionki występujące u Ciebie w systemie mają nieodpowiedni format pliku dla FF (jeśli przy skrypcie także nie działają).

Zobacz tu: https://forums.madcapsoftware.com/viewtopic.php?f=9&t=15267.
Możesz sprawdzić też to: https://support.mozilla.org/pl/questions/1016919

U mnie Courier wyświetla się poprawnie, pozostałe dwie – nie, ale dlatego pewnie, że nie mam ich zainstalowanych w systemie (Fedora). Skryptu nie testowałem, bo nie mam też IE.

Co do kodu, radziłbym jednak podzielić na dwa pliki – HTML i CSS, nawet jeśli to tylko test, jak napisałeś.

0
andrzejlisek napisał(a):

Problem polega na tym, że czcionki składające się z samych symboli w miejscu liter wyświetlają się poprawnie tylko w IE, a w FF wyświetlają się zwykłe znaki tak, jakby nie było tej czcionki.

Według Firefoksa znaki z czcionek takich jak Webdings nie są literami (w końcu wyglądają zupełnie inaczej), a każda przeglądarka w momencie nieznalezienia znaku wyświetla go używając innej czcionki, często Times New Roman. Tak jest od początku istnienia Firefoksa, Mozilla nie uznaje tego za błąd i nie zamierza zmieniać, dlatego pozostaje potraktowanie tych czcionek w specjalny sposób i wyświetlenie zamiast liter odpowiednich symboli Unicode lub nawet .

Można to przestawić edytując plik: https://www.ibm.com/support/knowledgecenter/en/SS9RXT_10.1.0/com.ibm.swg.ba.cognos.tm1_inst.10.1.0.doc/t_enablingthedisplayofsymbolandwingdingsfonts_n50409.html, ale z poziomu kodu strony nic nie zrobisz.

0

ja ci dam czcionki zaraz :/

0

@Silv: nawet pliku graficznego z tym symbolem wstawionego przez img. Ale napisałem img ze znakiem mniejszości i większości, a ktoś tworzący skrypt tego forum nie wpadł na pomysł, żeby escape'ować znaki specjalne w postach zamiast usuwania HTML-a, czy żeby chociażby napisać pod polem, że znaki te są zabronione.

0

Silv: Rozumiem, że w Fedorze są inne czcionki, więc mam prośbę, żebyś zmienił w kodzie te czcionki, których nie masz na czcionki takie, jakie masz (Arial i Courier na dowolne "tekstowe", a Webding na dowolną symbolową).

https://www.ibm.com/support/knowledgecenter/en/SS9RXT_10.1.0/com.ibm.swg.ba.cognos.tm1_inst.10.1.0.doc/t_enablingthedisplayofsymbolandwingdingsfonts_n50409.html
Nie mam tego pliku. Możliwe, że to było aktualne w starych wersjach FF.

IE generalnie nie używam, więc był w stanie praktycznie świeżo po instalacji systemu, do niego niczego nie doinstalowywałem. Przy FF w safe mode jest tak samo jak w zwykłym trybie. Do FF nie doinstalowywałem żadnego dodatku, są tylko dwa do odtwarzania video.

Użycie czcionek Google, czy innych dociąganych online w moim przypadku mija się z celem. Podstawowy cel to wyświetlanie czcionek z komputera, więc mam do wyporu, czy zrobić do tego aplikację desktopową, czy uruchamianą w przeglądarce. Mi jest to obojętne, ale zdecydowałem się na drugie rozwiązanie, bo uruchomi się na każdym systemie, o ile przeglądarka jest zgodna z HTML5/CSS3/JS. Czy może złą decyzję podjąłem?

Ja oczekuję sprawdzenia, czy kod w pierwszym poście jest poprawny i zgodny ze standardem i zaleceniami (chodzi o kwestie sposobu implementacji czynności niż takie rzeczy, jak HTML w pierwszym pliku, JS w drugim pliku, CSS w trzecim pliku). Na niedoskonałości i niespełnialność standardów w przeglądarkach nic nie poradzę i nie chodzi mi o to, jak ustawić przeglądarkę bądź system, tylko o to, jak standardowo i zgodnie z zaleceniami W3C powinno się uzyskiwać oczekiwany efekt.

Może zmianę czcionki w komórce tabeli za pomocą JS powinno robić się inaczej niż poprzez Tbl.rows[0].cells[2].style i dlatego nie działa to w IE, bo rzecz niezgodna z standardami W3C nie musi być obsługiwana?

Czyli teraz już wiem, że niewyświetlanie czcionek symbolowych to cecha FF, a nie błąd w moim skrypcie. Nie zamierzam szukać obejścia, czyli wyświetlać w to miejsce znaków Unicode, ale jak będę mieć inny projekt, to muszę pamiętać, że takie czcionki nie są zalecane w celu wyświetlenia symbolu.

Teraz pozostaje kwestia czcionek w komórkach tabel.

Jak się okaże, że nie da się uzyskać oczekiwanego efektu, to napiszę ten sam program w C# w WinForms robiący to samo, jest to robota na jeden czy dwa wieczory, więc to nie problem.

0
andrzejlisek napisał(a):

Ja oczekuję sprawdzenia, czy kod w pierwszym poście jest poprawny i zgodny ze standardem i zaleceniami

Nie jest, bo mieszasz atrybut style z obiektowym API od stylów.

// możesz użyć tego
    Tbl.rows[0].cells[0].setAttribute("style", "font-family:'" + FontName + "'; font-size:" + FontSize + "pt;");
// a możesz tego
    Tbl.rows[0].cells[0].style.fontFamily = FontName;
    Tbl.rows[0].cells[0].style.fontSize = FontSize;
0
Czarny Karp napisał(a):
Tbl.rows[0].cells[0].style.fontSize = FontSize;

Dodam jeszcze, że gdyby dokument nie był w quirks mode (= miał prawidłowy doctype), konieczne byłoby dodanie "pt" przy ustawianiu fontSize.

0

Zrobiłem fontFamily i fontSize i teraz w obu przeglądarkach działa mi prawidłowo nadawanie rodzaju i rozmiaru czcionki.

Jak zrobiłem "doctype html" odpowiedni dla HTML5, to zauważyłem, że jak tabela jest wewnątrz akapitu, to przeglądarka "gubi" atrybut center.

  <p align="center">
   AAA
   <table border="1">
    <tr></td>X</td></tr>
   </table>
   BBB
  </p>

A jak zrobię tabelę poza akapitem, to wszystko jest prawidłowo:

  <p align="center">
   AAA
  </p>
  <table align="center" border="1">
   <tr></td>X</td></tr>
  </table>
  <p align="center">
   BBB
  </p>

Przy okazji zauważyłem, że IE ani FF nie widzi czcionek bitmapowych (w Windows "Fixedsys", "Courier"), ale rozumiem, że to jest ich cecha i nic na to nie można poradzić.

W takim razie dziękuję za odpowiedzi, jak będe mieć dalsze problemy, to będe pisać.

0
andrzejlisek napisał(a):

Jak zrobiłem "doctype html" odpowiedni dla HTML5, to zauważyłem, że jak tabela jest wewnątrz akapitu, to przeglądarka "gubi" atrybut center.

Tabela (ani żaden inny element blokowy) nie może być częścią akapitu, parser HTML5 kończy akapit w miejscu gdzie zaczyna się tabela. A bez żadnego doctype przeglądarki przetwarzają kod w trybie emulacji Netscape 4 i IE 5.

Przy okazji zauważyłem, że IE ani FF nie widzi czcionek bitmapowych (w Windows "Fixedsys", "Courier"), ale rozumiem, że to jest ich cecha i nic na to nie można poradzić.

Tak, są one dostępne tylko dla programów używających GDI, np. starych wersji przeglądarek, nie są dostępne w przypadku renderowania przez DirectWrite i Direct2D.

0

Silv: Rozumiem, że w Fedorze są inne czcionki, więc mam prośbę, żebyś zmienił w kodzie te czcionki, których nie masz na czcionki takie, jakie masz (Arial i Courier na dowolne "tekstowe", a Webding na dowolną symbolową).

Przepraszam, ale z racji tego, że na razie nie ogarniam, jak działają dokładnie czcionki w CSS, Firefoksie, w Fedorze i na linuksie, ustawienie przeze mnie czcionki o konkretnych właściwościach mija się z celem, choćby dlatego, że i tak nie będę wiedzieć, czy to, co zrobiłem, działa (a jeśli nie, to dlaczego).

0
Silv napisał(a):

Silv: Rozumiem, że w Fedorze są inne czcionki, więc mam prośbę, żebyś zmienił w kodzie te czcionki, których nie masz na czcionki takie, jakie masz (Arial i Courier na dowolne "tekstowe", a Webding na dowolną symbolową).

Przepraszam, ale z racji tego, że na razie nie ogarniam, jak działają dokładnie czcionki w CSS, Firefoksie, w Fedorze i na linuksie, ustawienie przeze mnie czcionki o konkretnych właściwościach mija się z celem, choćby dlatego, że i tak nie będę wiedzieć, czy to, co zrobiłem, działa (a jeśli nie, to dlaczego).

Sprawa jest prosta. Jako "fontFamily" podajesz nazwę czcionki dokładnie taką samą, jaka występuje w każdym edytorze tekstu (np. OpenOffice Writer), a jako "fontSize" podajesz wielkość czcionki. Potem sprawdzisz, jak wygląda czcionka w edytorze i w testowym skrypcie i zobaczysz, czy wygląda tak samo i tylko o to mi chodzi. Jeżeli czegoś jeszcze nie rozumiesz, to pisz, możliwe, że ja lub ktoś podpowie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1