(Beginner do HTML)Photoshop Mock Up czcionki nie jest taki sam jak w HTML
Zrobiłem Photoshop makietę strony chcę zrobić, ale tekst Użyłem w makiety wygląda inaczej w przeglądarce Firefox. Tekst to czcionka Arial, rozmiar 18 punktów i zwykła waga, i zaimplementowałem to w kodzie HTML, ale wygląda inaczej.
Czy istnieje sposób, aby czcionka wyglądała tak samo w HTML jak w Photoshopie?
Z góry dziękuję :)
Krótka odpowiedź brzmi "nie". Photoshop ma więcej funkcji czcionki niż przeglądarka internetowa. Obejmuje wszystkie rodzaje algorytmów wygładzania i znacznie lepiej kontroluje kerning, śledzenie i odstępy.
Każda przeglądarka i system operacyjny ma również odrębny mechanizm renderowania, więc nawet gdyby można było uzyskać to samo w jednej kombinacji przeglądarki/systemu operacyjnego, wyglądałoby inaczej w innym.
Jednak sprawdź wszystkie CSS properties for text, aby sprawdzić, czy możesz uzyskać coś, z czym możesz żyć. Jeśli nie, najlepiej jest po prostu zrobić zdjęcie z tekstu i dodać go do swojej strony z dobrym tekstem "alt" i innymi.
Wystarczająco uczciwe. Dzięki. – Mozaz
Różnice między renderowaniem HTML a renderowaniem anty-alias Photoshopa nie powinny być powodem używania obrazów zamiast tekstu. Rozważ zwiększoną przepustowość i nie zezwalaj użytkownikowi na wybór tekstu. –
@womp: Wiem, że jest to bardzo stara odpowiedź, ale dla każdego, kto tu przyjdzie, przestań wklejać linki do w3schools. – Razort4x
Nie jestem pewien, z jakiego systemu operacyjnego korzystasz, ale systemy Windows i Macintosh mają różne systemy czcionek.
This post by Joel Spolsky wskazuje, że renderowanie czcionek oparte jest na różnicach filozoficznych.
Czy to widzisz? Opublikuj zdjęcia, abyśmy mogli zobaczyć, o czym mówisz.
Czcionki to coś, czego po prostu nie można uzyskać w sieci. Jeśli koniecznie musisz kontrolować wygląd czcionek, musisz użyć obrazów (i uzyskać za to odpowiednio bity). Po prostu nie można uzyskać wyświetlania tekstu w formacie HTML w języku HTML. Zaczyna się od różnic w czcionkach, które ma system operacyjny i kończy się różnicami w silnikach układu przeglądarki.
Istnieją dwa sposoby, aby to zrobić:
Zasadniczo, jeśli chcesz mieć dokładnie taki sam wygląd i zachować zgodność ze standardami, jest to prawie niemożliwe.
Jeśli szukasz sposobu na przekształcenie makiet Adobe Photoshop w dokumenty HTML, powinieneś zapoznać się z screencast series na stronie CSS-tricks.com, prowadzonej przez Chrisa Coyiera, bardzo utalentowanego projektanta (nie, to nie ja :)) .
Kolejną rzeczą, którą musisz zrozumieć, jest to, że ludzie z przeglądarkami internetowymi ostatecznie kontrolują wygląd twojej strony. Więc bez względu na to, jak dużo skrzypiec robisz, aby strona wyglądała tak, jak chcesz, będzie wyglądała inaczej na czyimś komputerze.
Jeśli potrzebujesz doskonałych, krystalicznie czystych dopasowań czcionek, możesz użyć lampy błyskowej ... ale to pochodzi z całego ładunku wady.
Nigdy nie dostaniesz idealnie pasującego piksela pomiędzy Makietą i przeglądarką. Nigdy nie dostaniesz idealnie pasującego piksela między przeglądarkami. Jeśli chodzi o renderowanie czcionek w aplikacjach, w grę wchodzą dwa różne czynniki. Windows ma renderowanie subpikseli, które można włączyć na poziomie aplikacji, aplikacje zaimplementują własne renderowanie subpikseli, domyślne kernelowanie czcionki może się różnić, ad infinitum ... – MyItchyChin