如何更改 Flutter 网页字体?

Posted

技术标签:

【中文标题】如何更改 Flutter 网页字体?【英文标题】:How to change Flutter for web Font? 【发布时间】:2019-11-23 04:36:49 【问题描述】:

我正在尝试更改 Flutter for Web 应用程序中标题的字体,我该怎么做?我发现pubsec.yaml和手机版完全不一样,这里是文件:

name: projectbaseclient
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.5.0
  build_web_compilers: ^2.1.0
  pedantic: ^1.7.0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

这是 FontManifest.json:

[
    
      "family": "Poppins",
      "fonts": [
        
          "asset": "fonts/Poppins-Regular.ttf"
        
      ]
    ,
    
      "family": "KronaOne",
      "fonts": [
        
          "asset": "fonts/KronaOne-Regular.ttf"
        
      ]
    ,
    
      "family": "Ubuntu",
      "fonts": [
        
          "asset": "fonts/Ubuntu-Regular.ttf"
        
      ]
    
  ]

我已经创建了一个文件夹 assets/fonts 并在文件夹中添加了字体,我还创建了 FontManifest.json 并将其放在 assets 文件夹中,但是代码不起作用,当我更改 fontFamily 参数时它给了我错误在 Text 对象中。

如何将字体用于 Flutter for Web 项目?

【问题讨论】:

【参考方案1】:

检查assets 文件夹是否位于web 文件夹中。接下来,将FontManifest.json 的内容与下面的示例进行比较:

[
  
    "family": "Rubik",
    "fonts": [
      
        "asset": "fonts/Rubik-Regular.ttf"
      ,
      
        "asset": "fonts/Rubik-Medium.ttf",
        "weight": 500
      
    ]
  
]

更新

由于Flutter for web 项目目前与Flutter 主存储库合并,因此不再推荐使用此方法。在web 文件夹FontManifest.json 中创建的文件与编译器一创建的文件冲突。在pubspec.yaml 文件中指定字体。

【讨论】:

这与我所做的类似,我刚刚上传了 FontManifest.json,现在的问题是我有很多同一系列的字体但我不想全部使用它们,我有吗在 FontManifest.json 中声明它们? 只声明那些使用。

以上是关于如何更改 Flutter 网页字体?的主要内容,如果未能解决你的问题,请参考以下文章

默认情况下如何禁用或覆盖网页中从svg继承的字体

网页设计中如何设计自动改变字体颜色

如何在HTML中使用WOFF条码网页字体

如何在 Flutter 中更改文本字段的字体大小?

在网页设计中,如何利用CSS让字体边缘有颜色,比如字体是白色的,他的边缘颜色是黑色的?

我用HTML5做手机网页,如何设置字体大小以适合各种设备?