To proste: Czcionki nie muszą pasować do rozdzielczości, muszą pasować do gęstości pikseli .
Gęstość pikseli mierzy się w pikselach na cal ( PPI ) lub pikselach na centymetr. Istnieje również jednostka miary zwana pikselami niezależnymi od gęstości ( DP ) . Określa się, że 1dp
jest to rozmiar jednego piksela na 160 PPI
ekranie.
Teraz wracając do czcionek, spróbuj wykonać ten test: uruchom laptopa na 720p. Spójrz na rozmiar czcionki. Teraz podłącz go do monitora 1080p 42 "na pulpicie. Jeśli monitor wyświetla prawidłowe informacje o swoim rozmiarze, czcionka powinna mieć DOKŁADNIE taki sam rozmiar jak na ekranie 720p. Wyobraź sobie, jak dziwnie by było, gdyby tekst w twoim laptop miał inny rozmiar niż tekst na monitorze komputera. Powiedziawszy to, większe rozdzielczości powinny dawać więcej szczegółów czcionce, większe ekrany powinny dawać więcej treści do wyświetlenia.
Ten sam fakt można zaobserwować w edytorach tekstu. 72pt
Czcionki powinien wyglądać na ekranie taki sam to po wydrukowaniu na papierze.
Wszystko to oznacza, że prawdopodobnie powinieneś chcieć mieć taki sam rozmiar we wszystkich rozmiarach wyświetlacza (z pewnymi wyjątkami). Jeśli chcesz gdzieś się oprzeć, strony internetowe zwykle używają 12pt
czcionek, MS Windows 11pt
i 12pt
czcionek.
Ta tabela (również u dołu odpowiedzi) mówi nam, że 12pt
w CSS jest mniej więcej równa 16px
również w CSS (jakby to nie było dość mylące, px w CSS jest taki sam jak dp wszędzie indziej), więc powiedzmy, że 16dp
Zrobię twoje czcionki na LibGDX.
W swojej grze używaj FreeTypeFontGenerator
do dynamicznego generowania czcionek, w ten sposób możesz wziąć pod uwagę gęstość ekranu podczas ich tworzenia:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
Działa Gdx.graphics.getDensity()
to, ponieważ jest równe, YourScreenDensity/160
dlatego jest „współczynnikiem skali”, aby doprowadzić rzeczy do rozmiaru, jaki byłyby na ekranie o rozdzielczości 160ppi.
O wyjątkach, o których wspomniałem wcześniej: prawdopodobnie będziesz chciał zmienić rozmiar czcionek odpowiednio do rozmiaru ekranu w przypadku logo, promocji itp. Pamiętaj jednak, że lepiej będzie, jeśli utworzysz je w edytorze graficznym, takim jak Photoshop lub Gimp , tak czy siak.
Drugim wyjątkiem jest tekst na małych ekranach. Ekrany telefonu o przekątnej 4,5 cala lub mniejsze, urządzenia do noszenia. Zwykle nie będziesz mieć czasu na przewijanie zawartości lub po prostu nie będziesz mógł sobie pozwolić na umieszczenie takiej ilości treści na tym ekranie. Możesz spróbować zmniejszyć czcionkę 1dp
, ponieważ czytelnik prawdopodobnie będzie miał telefon bardzo blisko twarzy, prawdopodobnie nie będzie miał problemu z czytaniem. Pamiętaj, że możesz denerwować gracza czytającego nieczytelny mały tekst.
TL; DR:
- Rozmiar fizyczny z grubsza nie zmienia się bezpośrednio wraz z rozmiarem ekranu lub rozdzielczością, ale z kombinacją obu (
screenSize/resolution
słynny PPI)
- Pomyśl o pt i dp . Zapomnij o pikselach ekranowych, dopóki nie będziesz musiał narysować końcowego wyniku.
- Utwórz czcionkę w czasie wykonywania w rozsądnym rozmiarze.
- Konwersja dp na piksele ekranowe:
pixels = dp * Gdx.graphics.getDensity();
- Jeśli używasz silnika, który nie daje ci konwertera na dp jak LibGDX
Gdx.graphics.getDensity()
, możesz spróbować :, densityFactor = Screen.getPixelsPerInch() / 160.0f
topixels = dp * densityFactor
EDYTOWAĆ:
2014, 25 czerwca w Google IO, Matias ogłosił nowe wytyczne dotyczące stylu dla Androida, zawiera nowe wytyczne dotyczące czcionek i typografii Roboto. Weź ten stół jako przewodnik:
EDYCJA 2:
Dołączona tabela rozmiarów czcionek CSS na wypadek zepsucia się linku: