Thật dễ dàng: Phông chữ không cần phải khớp với độ phân giải, chúng cần phải phù hợp với mật độ pixel .
Mật độ pixel được đo bằng pixel trên inch ( PPI ) hoặc pixel trên centimet. Ngoài ra còn có một đơn vị đo được gọi là pixel độc lập mật độ ( DP ) . Nó được định nghĩa 1dplà kích thước một pixel có trên 160 PPImàn hình.
Bây giờ trở lại với phông chữ, hãy thử thực hiện bài kiểm tra này: đặt máy tính xách tay của bạn để chạy trên 720p. Hãy nhìn vào kích thước của phông chữ. Bây giờ hãy cắm nó vào màn hình 1080p 42 "của máy tính để bàn của bạn. Nếu màn hình của bạn cung cấp thông tin chính xác về kích thước của nó, thì phông chữ phải chính xác cùng kích thước trên màn hình 720p. Hãy tưởng tượng nó sẽ kỳ lạ như thế nào nếu văn bản trong của bạn máy tính xách tay có kích thước khác với văn bản trên màn hình máy tính để bàn của bạn. Như đã nói, độ phân giải lớn hơn sẽ cung cấp nhiều chi tiết hơn cho phông chữ, màn hình lớn hơn sẽ hiển thị nhiều nội dung hơn.
Thực tế tương tự có thể được quan sát trên các trình soạn thảo văn bản. Một 72ptphông chữ sẽ trông giống như trên màn hình khi in trên giấy.
Tất cả điều này có nghĩa là bạn có thể muốn có cùng kích thước trên tất cả các kích thước hiển thị (với một số ngoại lệ). Nếu bạn muốn đặt cơ sở ở đâu đó, các trang web thường sử dụng 12ptphông chữ, MS Windows sử dụng 11ptvà 12ptphông chữ.
Biểu đồ này (cũng được bao gồm ở dưới cùng của câu trả lời) cho chúng tôi biết 12ptvề CSS gần bằng với 16pxCSS (Như thể điều này không đủ khó hiểu, một px trong CSS cũng giống như dp ở mọi nơi khác), vì vậy hãy nói với bạn Sẽ tạo phông chữ của bạn 16dptrên LibGDX.
Trong trò chơi của bạn, hãy sử dụng FreeTypeFontGeneratorđể tạo phông chữ động, theo cách này bạn có thể xem xét mật độ màn hình khi tạo chúng:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
Điều này hoạt động vì Gdx.graphics.getDensity()tương đương với YourScreenDensity/160, là một "yếu tố tỷ lệ" để đưa mọi thứ đến kích thước mà chúng sẽ có trên màn hình 160ppi.
Về các trường hợp ngoại lệ tôi đã đề cập trước đó: có thể bạn sẽ muốn thay đổi kích thước phông chữ theo kích thước màn hình trong trường hợp logo, quảng cáo, v.v. Nhưng hãy nhớ rằng bạn sẽ tốt hơn khi thực hiện chúng trên trình chỉnh sửa đồ họa như Photoshop hoặc Gimp , dù sao.
Ngoại lệ khác là văn bản trên màn hình nhỏ. Màn hình điện thoại 4,5 "hoặc nhỏ hơn, thiết bị đeo tay. Thông thường, bạn sẽ không có thời gian để tạo nội dung cuộn hoặc bạn sẽ không đủ khả năng để đưa quá nhiều nội dung lên màn hình đó. Bạn có thể thử thu nhỏ phông chữ 1dp, như người đọc có thể sẽ có điện thoại rất gần mặt họ, họ có thể sẽ không gặp vấn đề gì khi đọc. Hãy nhớ rằng bạn có thể làm phiền người chơi khi đọc văn bản nhỏ không thể đọc được.
TL; DR:
- Kích thước vật lý gần như không thay đổi trực tiếp với kích thước hoặc độ phân giải màn hình, nhưng với sự kết hợp của cả hai (
screenSize/resolutionPPI nổi tiếng)
- Hãy nghĩ về pt và dp . Hãy quên các pixel màn hình cho đến khi bạn phải vẽ kết quả cuối cùng.
- Tạo phông chữ của bạn trong thời gian chạy với kích thước hợp lý.
- Chuyển đổi dp thành pixel màn hình:
pixels = dp * Gdx.graphics.getDensity();
- Nếu bạn đang sử dụng một động cơ mà không cung cấp cho bạn chuyển đổi để DP như LibGDX của
Gdx.graphics.getDensity(), bạn có thể thử: densityFactor = Screen.getPixelsPerInch() / 160.0f, sau đópixels = dp * densityFactor
BIÊN TẬP:
2014, ngày 25 tháng 6 trên Google IO, Matias đã công bố một hướng dẫn phong cách mới cho Android, nó bao gồm một hướng dẫn về phông chữ và kiểu chữ Roboto mới. Lấy bảng này làm hướng dẫn:
EDIT2:
Biểu đồ kích thước phông chữ CSS bao gồm trong trường hợp liên kết bị thối:
