首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular -我导入了一个自定义字体,但显示的是相同的Roboto字体

Angular是一种流行的前端开发框架,用于构建单页应用程序。它基于TypeScript编程语言,并提供了丰富的工具和功能来简化开发过程。

对于你提到的问题,当你导入一个自定义字体但显示的是相同的Roboto字体时,可能有以下几个原因:

  1. 字体文件路径错误:请确保你在Angular项目中正确引用了自定义字体文件,并且文件路径是正确的。你可以使用相对路径或绝对路径来引用字体文件。
  2. 字体格式不受支持:确保你使用的字体文件格式是受浏览器支持的。常见的字体文件格式包括TTF、OTF、WOFF和WOFF2。你可以使用在线字体转换工具将字体文件转换为不同的格式。
  3. 字体名称不正确:在CSS样式中,确保你正确地指定了自定义字体的名称。你可以使用@font-face规则来定义自定义字体,并在需要的地方应用它。
  4. 缓存问题:如果你之前已经加载过相同的字体文件,浏览器可能会缓存该字体文件并继续使用缓存的版本。你可以尝试清除浏览器缓存或在文件名中添加版本号来避免缓存问题。

总结起来,当你导入一个自定义字体但显示的是相同的Roboto字体时,你需要检查字体文件路径、字体格式、字体名称和缓存问题。确保你正确引用了字体文件,并在CSS样式中正确地应用了自定义字体。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云字体库:提供了丰富的字体资源,可以满足不同项目的需求。链接地址:https://cloud.tencent.com/product/fontstore
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 上字体另类玩法:FontFeature

简单来说就是影响字体形状一个属性 ,在前端对应领域里应该是 font-feature-settings,它有别于 FontFamily ,用于指定字体内字形状一个参数。...image 我们知道 Flutter 默认在 Android 上使用 Roboto 字体,而在 iOS 上使用 SF 字体,但是其实 Roboto 字体也是分很多类型,比如你去查阅手机 system...image 所以 Roboto 之类字体一个很大字体集,不同 font-weight 其实对应着不同 ttf ,例如默认情况下 Roboto 不支持 font-weight 为 600...Features 都是一样,比如 iOS 上支持 sups 上标显示和 subs 下标显示,但是 Android 上 Roboto 并不支持,甚至很多第三方字体其实并不支持 Features...当然后续 #16709 修复了这个问题 ,而在以前文章也讲过,当时遇到了 “Flutter 在 iOS 系统上,系统语言韩文时,在和中文一起出现会导致字体显示异常" 问题 : image.png

1.6K20

字体更改

truetype"); } body { font-family: '字体名字'; } 其中@font-face相当于创建一个字体族,然后下边body部分在应用字体族,那个名字其实就是在前边创建字体名字...通过在网络上查找,首先选择使用Robot字体,这个字体族写英文字体相当漂亮: Robot字体本身一款非常漂亮英文字体Roboto-Medium 字体被广泛用于广告、海报、画册、...考虑到该字体并不支持中文形式,因此在中英文混排时看起来不是那么美观,出于这点考虑,又加入了自己比较喜欢一款思源字体来作为中文字体: 二者混排效果整体来看还算满意,这也本网站当前显示效果...另外在寻找字体在谷歌字体上发现了一款比较美观中文字体,但由于该字体和Robot字体混排大小不太美观遂没有采用: 这里拿标签显示效果做一个说明,可以看出该字体英文效果不是很让人满意。...另外考虑到一般情况下下载字体文件为otf或者ttf格式,这两种格式字体文件都比较大,为了加载方便一般会转化为woff格式,配置过程中用到两个转换网站: ttf转woff otf转woff

3.5K30

打造 Material 字体样式主题 | 实现篇

使用 Material 主题 (Theming) 自定义 Material 组件,目的让组件观感与品牌保持一致。...对于自定义样式,我们推荐两种方法来帮您实现关注点分离,并为应用中字体样式主题值创建单一数据来源: 将所有 TextAppearance 样式存放在同一个 res/values/type.xml 文件中...构建 Material 主题 构建 Material 主题 一个可交互 Android 项目,您可以通过它修改颜色、字体样式、形状值来创建您自己 Material 主题。...在本次更新中,我们加入了属性表,涵盖了开发库中所使用设计术语和属性默认值。例如下面更新 按钮文档 "Anatomy and key properties" (详解和关键属性) 部分。...以下自定义组件支持样式主题化注意事项。 在 和默认样式中使用 MDC 属性 当自定义 View 使用了 标签时将可被样式化。

1.6K20

突破限制,CSS font-variation 可变字体魅力

而如果我们想引入一个字体家族(譬如 Roboto 字体族),它可能包含了 “Roboto Regular”(常规字重)、“Roboto Bold”(粗体),或是 “Roboto Bold Italic”...基本语法相同,但是字体技术不一样,并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符允许范围,而不是根据加载字体文件来命名。...不一样倾斜) 光学尺寸轴 "opsz":对应字体 font-optical-sizing,控制字体光学尺寸 自定义轴实际上无限字体设计师可以定义和界定他们喜欢任何轴,并且只需要给它一个四个字母标签以在字体文件格式本身中识别它...: 'GRAD' 88; } 上述 font-family: "Amstelvar VF" 一个可变字体,而 'GRAD' 属于自定义一个,意为等级轴。...MDN 上有关于改变 'GRAD' 值,对应字体变化一个 DEMO,效果如下: 值得注意自定义轴可以是字体设计师想象任何设计变化轴。

1.2K10

jupyter notebook 主题自定义

本文内容:jupyter notebook 主题自定义 ---- jupyter notebook 主题自定义 1.jupyterthemes 安装 2.jupyterthemes 内容与用法 2.1...---- jupyter notebook 我们常用 Python 编辑环境,但是它配色风格与字体风格却有些单调,使用久了难免有些厌倦,本文将教大家更改 jupyter notebook 主题和字体...1.jupyterthemes 安装 jupyterthemes 一个开源 jupyter 插件,它为我们提供了多种配色风格和字体。...笔者对插件提供主题配色比较满意,插件中没有包含笔者喜欢Consola字体,于是笔者便自己导入字体来设置,下面提供教程。...} 加入自己字体名称,红框为笔者添加字体: 除此之外,我们还要将对应字体文件放到对应位置。

54320

Android Q 文本新功能

image.png 作者: Florina Muntenescu, Android 开发技术推广工程师 文本显示大部分应用重要任务之一。...在一个 TextView 中使用多种自定义字体 如果需要一个按钮上既含有自定义字体 (下图中 Lato 字体),又含有图标字体 (下图小锁标志),应该怎么办?...为了增加字体数量,Android Q 引入了一个 API, 开发者可以在创建 typeface 时,调用 Typeface.CustomFallbackBuilder,为单个 typeface 添加最多...,切勿在同一个字体族对象中添加属于不同族字体,也不要把相同风格字体添加到一个字体族中。...Myanmar 符合 Unicode 标准, 且对缅文字体 (不论 Unicode 版本,还是非 Unicode 版本, 即 Zawgyi 字体) 提供原生渲染支持。

1.2K30

Android Q 文本新功能

作者: Florina Muntenescu, Android 开发技术推广工程师 文本显示大部分应用重要任务之一。...在一个 TextView 中使用多种自定义字体 如果需要一个按钮上既含有自定义字体 (下图中 Lato 字体),又含有图标字体 (下图小锁标志),应该怎么办?...为了增加字体数量,Android Q 引入了一个 API, 开发者可以在创建 typeface 时,调用 Typeface.CustomFallbackBuilder,为单个 typeface 添加最多...,切勿在同一个字体族对象中添加属于不同族字体,也不要把相同风格字体添加到一个字体族中。...Myanmar 符合 Unicode 标准, 且对缅文字体 (不论 Unicode 版本,还是非 Unicode 版本, 即 Zawgyi 字体) 提供原生渲染支持。

14410

小谈中文环境下中文排版font-family 字体选择

在开发Mindia 主题时候,为了弄出相对好看中文排版,特意补习了下中文排版font-family 字体选择相关资料。以下就从自己角度说下自己不算得上收获收获吧。...什么样环境就有不同适应法则,对于小小font-family 字体,极力用好当前资源才是王道,并在其他方面提高用户体验不足。...老掉牙东西 在进入正文之前,一些font-family 旧知识(规则)还是要复习下几点,比如说: 1、中文字体有英文名称,建议中英文名称都写上。...这个应该是知道了,鄙人认为,如果面对Windows用户为主的话,其实微软雅黑也可以直接写在前头,因为微软雅黑本身有相应英文字符。...,然而pc端个浏览器支持情况也各不相同,如: 五大类字体 IE系列 Chrome Firefox sans-serif(无衬线) 支持 不支持 不支持 serif(衬线) 支持 支持 支持 monospace

2.3K100

Flutter 上默认文本和字体知识点

正如下图所示,它们 G 字母在显示效果上会有所差异,比如 平方 G 有明显转折线。 ? image 这时候不禁产生好奇,在 Flutter 中引擎默认究竟是如何选择字体?...和 defaultAccentTextTheme 中,所以应该是使用 .SF 相关字体才会,为什么会显示 PingFang SC 效果?...上除了 .SF 相关字体外,还有 PingFang 字体存在,这时候突然想起在之前 《Flutter完整开发实战详解(十七、 实用技巧与填坑二)》 中,因为国际化多语言在 .SF 会出现显示异常...image 终于破案了,因为当 fontFamily 没有设置时,就会使用 fontFamilyFallback 中一个值将作为首选字体,而在 fontFamilyFallback 中顺序匹配,...更棒由于 SF 属于动态字体,Text 和 Display 两种字体系统动态匹配,也就是说你不用费心去自己手动调节,系统自动根据字体大小匹配这两种显示模式。

3.4K10

Material design无需照搬Google

由于,使用宽泛配色来填充设计,极具诱惑力。颜色不必强烈反差来满足material标准、达成目的——只要意图鲜明就可以了。...我们邮件app最后用了相对简单、接近配色,采用投影和渐变来区别于Google,同时创造并传达其意义。 字体 ? Google显然具有运用字体传播品牌力量。...通过创造和统一使用他们Android预留字体,Droid Sans和Serif,如今则是Roboto和Noto,他们不仅创造了清晰界面,也强调了品牌。...我们要一套简洁、现代外观,类似于Roboto——但不尽然。Google Fonts上对Roboto描述 表现了他们试图让它适用于所有人——他们用了少量词句描述,比如混搭、人文主义还有几何学。...于是我们选了Avenir字体,另一种跨界字体,它源于无装饰Futura字体入了更多人文主义曲线。不像Roboto或Apple挚爱Helvetica,它不是混搭字体

1.1K60

Flutter 构建完整应用手册-设计基础知识 顶

路线 创建一个Scaffold 显示一个SnackBar 提供额外操作 1.创建一个Scaffold 在创建遵循材质设计指南应用程序时,我们希望为我们应用程序提供一致可视化结构。...使用自定义字体 虽然Android和iOS提供高质量系统字体设计师最常见要求之一使用自定义字体! 例如,我们可能会从我们设计人员那里获得一个定制字体,或者从谷歌字体中下载一种字体。...完整例子 Fonts Raleway和RobotoMono字体从谷歌字体下载。...从包中导出字体 我们可以将字体声明为单独程序包一部分,而不是将字体声明为我们应用程序一部分。 这是一种方便方式,可以跨几个不同项目共享相同字体,也可以将包发布到 pub website。...); 2.添加一个Drawer 我们现在可以为我们Scaffold增加一个Drawer。 Drawer可以是任何部件,通常最好使用材质库中Drawer部件,该材质库遵守材质设计规范。

7.1K10

21. 精读《Web fonts: when you need them, when you don’t》

对于英文字母,26个字母可以解决大部分问题,算上大小写和基本符号,一张ASCII码标就可以包含住。让再扩展一下,到大部分西文书写系统,几百个字符就能解决多语言显示问题了。...以下作为一个普通开发者自问自答: 字体对你品牌很关键吗?(需要特性字体中文LOGO基本都用PNG和SVG解决了,Web Font不实用。) 字体让你文字阅读起来更容易了吗?...(好像还没这么苛求吧……微软雅黑好看,安卓上Roboto也很不错啊,Roboto这种字体还针对移动设备有优化,何乐而不为。) 用了Web Font你会更开心吗?...文章也提了一点,如果你字体授权很贵,用户端深受FO*T折磨,那你还费这钱干嘛。 结论 如果能解决FO*T副作用,Web Font怎么舒服怎么用。...(译者注:删光设计师电脑里奇怪字体也能达到相同目的,哈哈哈~)

52720

fonts.googleapis.com访问太慢导致站点加载很慢

虽然最后能看到网站,实际上谷歌字体依然加载失败了,这个体验就非常差劲了。 解决方法 实际上这个谷歌字体可以不需要去访问,当然有强迫症可以靠访问国外网站等某些操作来达到快速加载目的。...方法一 使用360提供cdn,将需要加载谷歌字体url放到360Google 字体库搜索,会得到一串css代码,将代码拷贝到一个css文件中然后站点直接引入该css文件即可。...字体库获取代码,而是直接去谷歌字体链接把代码下载下来,拷贝到一个css文件里。...甚至还可以将css文件里字体文件woff或者ttf等下载下来,然后把css代码里字体文件链接全改为本地字体文件,之后依然在站点中引入css文件即可。...想看更具体做法可以参考这篇文章,当然了,对于懒人来说,直接不用谷歌字体就完事了,比如说

3.7K10

Web 字体 font-family 再探秘

与衬线字体相反,该类字体通常是机械和统一线条,它们往往拥有相同曲率,笔直线条,锐利转角。...一类类似这样具体字体族名定义:font-family: Arial 这里定义了一个具体字体样式,字体族名为 Arial; 一类通用字体族名,它是一种备选机制,用于在指定字体不可用时给出较好字体...正如每个前端开发人员都知道那样,将一个功能纳入规范一回事,将其纳入浏览器又是另一回事。 幸运,system-ui 普及很快。 Chrome 和 Safari 都可以在各种平台上完全支持它。...Segoe UI Segoe UI Windows 从 Vista 开始默认西文字体族,只有西文,不支持汉字,属于无衬线体。 它也表示一个系列而不是某一款单一字体。...Roboto Roboto 为 Android 操作系统设计一个无衬线字体家族。Google 描述该字体为“现代平易近人”和“有感情”

2.4K10

Custom Beautify

字体样式API实际上可以拆解成如下类型: 首先需要下载心仪字体。此处推荐一个免费字体库网站,支持在线转换预览和免费字体包下载。 这里选择一款叫做甜甜圈海报字体。根据页面按钮找到字体下载。...得到相应字体文件。为了方便起见,将其重命名为Candy.ttf。 将下载好字体包放到本地文件夹下,这里推荐新建一个fonts文件夹。...当然,在控制台添加样式暂时,我们在预览觉得满意后,就可以把font-family写进来custom.css了 关于font-display属性,这是一个CSS属性,可以让自定义字体显示更加顺滑...使用自定义字体文本会先被隐藏,直到字体加载结束才会显示。 swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。...版块显隐修改 点击查看板块显隐教程 有时候会遇到一些不希望显示内容,用不知道要怎么关掉它。那么干脆简单粗暴点,直接把它隐藏了。

2.3K20

【CSS】955- 你该知道字体 font-family

与衬线字体相反,该类字体通常是机械和统一线条,它们往往拥有相同曲率,笔直线条,锐利转角。...一类类似这样具体字体族名定义:font-family: Arial 这里定义了一个具体字体样式,字体族名为 Arial; 一类通用字体族名,它表示一大类字体(并非单个),类似这样:font-family...Segoe UI Segoe UI Windows 从 Vista 开始默认西文字体族,只有西文,不支持汉字,属于无衬线体。 它也表示一个系列而不是某一款单一字体。...Roboto Roboto 为 Android 操作系统设计一个无衬线字体家族。Google 描述该字体为“现代平易近人”和“有感情”。...使用系统默认字体主要原因性能,并且系统字体优点在于它与当前操作系统使用相匹配,因此它文本展示必然也是一个让人舒适展示效果。

4.5K20

改进 WordPress 文章样式,实现一键复制到微信公众号无需修改即可发布

标题样式 首先把标题样式改了一下,之前标题下面一条线,感觉有点难看,现在改成这个样子,感觉明显高级多了。...表格样式 技术类文章会比较多用到表格,针对微信公众号,特别优化了一下表格显示: 流量 单价 0GB-10GB(含) 免费 10GB-10TB(含) 0.21元/GB 10TB-50TB(含) 0.16...看到很多技术类公众号,都是使用这个字体列表,直接抄过来,看起来效果真的不错。...", "Helvetica Neue", "sans-serif"; } 代码样式 技术性文章怎么可能少了代码呢,所以代码样式是非常重要也是做了很多优化,如果上面文章字体代码样式效果,怎么样...'context' => 'side', // 显示在文章编辑页侧边 'list_table' => true, // 后台文章列表页也支持弹窗设置 'page_title' =>

40830
领券