如何在不同类型的分辨率下处理字体大小 [英] How to handle font size on different type of resolution

问题描述

我正在使用Pixel 2模拟器进行开发，当然，我使用的字体大小非常适合该手机.

I am developing on a Pixel 2 simulator and of course, the font size that I use are very good for that phone.

在使用iPhone 5S时，我期望字体大小会减小，并且与该屏幕分辨率成正比.也许Flutter做了些什么，但乍一看并不容易.

When going on a iPhone 5S, I was expecting to see the font size to be reduced and be proportional to that screen resolution. Maybe Flutter does something, but is it not easy to see at the first place.

我找到了'flutter_screenutil'插件，但无法正常工作.可能是因为我没有为ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);输入正确的值.这些值是iphone 6的设计中设备的屏幕尺寸"(基于示例).

I found 'flutter_screenutil' plugin, but not working as expected. Probably because I don't put the right values for the ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); The values are the 'screen size of the device in the design' of a iphone 6 (based on the example).

如果我在Blackberry Motion(1080x1794)上使用字体大小为100的插件，则结果是我所期望的.在iPhone 6(750x1334)上使用相同的代码，我应该使用70号字体.不是很有用.

If I use the plugin with font size 100 on my Blackberry Motion(1080x1794), the result is what I expect. Using the same code with an iphone 6(750x1334), I should use font size 70. Not very useful.

有人能在不更改代码中字体大小值的情况下，以不同的分辨率处理字体大小的好方法吗?

Anybody has a nice way to handle the font size for different resolution without changing the font size value put in the code?

推荐答案

您可以尝试使用Google字体.由于Flutter使用自定义字体，因此您可以在整个应用程序或单个小部件中应用自定义字体.使用字体大小为20的"Pacifico"系列产品时，我看不到任何问题.我还在Pixel 3和Iphone 11上测试了以下测试代码，没有看到任何问题.

You can try using Google fonts. As Flutter works with custom fonts and you can apply a custom font across an entire app or to individual widgets. I was not able to see any issues while running ‘Pacifico’ family with font size 20. I also tested the following test code on Pixel 3 and Iphone 11, and do not see any issues.

步骤简单，如flutter文档中所述:

Steps are simple as described in the flutter documentation:

1. 导入字体文件.
2. 在pubspec中声明字体.在可能的情况下，我下载了 来自 https://fonts.google.com/specimen/Pacifico?selection的Pacifico. family = Pacifico
3. 在特定的小部件中使用字体.

1. Import the font files.
2. Declare the font in the pubspec. In may case I downloaded the Pacifico from https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico
3. Use a font in a specific widget.

我的pubspec.yaml文件:

My pubspec.yaml file:

flutter: fonts: - family: Pacifico fonts: - asset: fonts/Pacifico-Regular.ttf 我的main.dart文件:

flutter: fonts: - family: Pacifico fonts: - asset: fonts/Pacifico-Regular.ttf My main.dart file :

` Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Font test',
   home: Scaffold(
     backgroundColor: Colors.white,
     body: SafeArea(
       child: Column(
         children: <Widget>[
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.red,
             child: Text(
               'container one',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.blue,
             child: Text(
               'container two',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.purple,
             child: Text(
               'container three',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),

         ],
       ),
     ),
   )
 );
}

如果您对字体有任何疑问，请告诉我.另外，如您所见，它是基本的示例应用程序.如果您能通过代码示例帮助我重现此问题，将不胜感激.我没有Mac机器可以帮助您进行屏幕截图.有了Maclaptop后，我将通过屏幕截图更新此线程

If you are having any issues with the fonts let me know, Also, as you see it’s the basic sample app. I would appreciate if you can help me out with the code sample to reproduce the issue. I do not have my Mac machine to help you with the screen shot. I will update this thread with the screen shot, once I have my Maclaptop

这篇关于如何在不同类型的分辨率下处理字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！