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

Angular 2 ngStyle无法绑定字体-以数字开头的字体系列

Angular 2是一个流行的前端开发框架,ngStyle是Angular 2中的一个指令,用于动态绑定样式。在使用ngStyle时,如果要绑定以数字开头的字体系列,可能会遇到无法生效的问题。

这个问题的原因是CSS规范中规定,字体系列名称不能以数字开头。因此,当我们尝试将以数字开头的字体系列绑定到ngStyle时,样式将不会生效。

解决这个问题的方法是使用CSS的@font-face规则来定义字体系列,并在ngStyle中绑定该字体系列的类名。具体步骤如下:

  1. 在CSS文件中定义@font-face规则,指定字体文件的路径和字体系列名称。例如:
代码语言:css
复制
@font-face {
  font-family: 'myFont';
  src: url('path/to/font.ttf');
}
  1. 在ngStyle中绑定该字体系列的类名。例如:
代码语言:html
复制
<div [ngStyle]="{'font-family': 'myFont'}">Hello, World!</div>

这样,通过将字体系列名称绑定到ngStyle中的'font-family'属性,我们可以成功应用以数字开头的字体系列。

对于腾讯云的相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的链接。但是,腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等,您可以在腾讯云的官方网站上找到详细的产品介绍和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular核心概念:数据绑定

(达内教育学习笔记)仅供学习交流 Angular数据绑定 Angular核心概念:数据绑定(1)HTML绑定:{{NG表达式}}(2)属性绑定(3)指令绑定(4)事件绑定()(5)双向数据绑定指令...:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...Angular指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM... 3.样式绑定:[ngStyle] 说明:ngStyle绑定值必须是一个对象...4.样式绑定:[ngClass] 说明:ngClass绑定值必须是一个对象!

3.5K10
  • angular入门教程_初学者织围巾简单教程慢动作

    课程介绍 本课程是一个系列基础教程,目标是带领读者上手实战,课程新版本 Angular 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程中必须用到特性:工具、指令、表单、RxJS、...认真读完这个系列文章之后,您会深入理解新版本 Angular 概念模型,具备使用 Angular 上手进行开发基本能力。...node-sass 模块被墙问题,强烈推荐使用 cnpm 进行安装,可以非常有效地避免撞墙。 一些开发者来抱怨说 @angular/cli 在打包时候加上 –prod 参数会报错,无法编译。...适合阅读的人群 这个系列文章适合以下人群阅读: Angular 新版本初学者 有 AngularJS 1.x 经验开发者 希望了解 Angular 新版本核心特性开发者 特别注意:这个系列文章不是前端入门读物...模板内局部变量 属性绑定、事件绑定、双向绑定 在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据

    3.3K20

    AngularDart4.0 指南- 模板语法二 顶

    'cyan': 'grey'" >Save 一些样式绑定样式有一个单位扩展名。 以下示例有条件地将字体大小设置为“em”和“%”单位。...NgStyle 您可以根据组件状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值简单方法。... 要同时设置多个内联样式,NgStyle指令可能是更好选择。 尝试绑定ngStyle到一个key:value控制Map。 对象每个键都是一个样式名称;它值是适合那种样式。...'24px' : '12px' }; } 添加ngStyle属性绑定到currentStyles将相应地设置元素样式: This...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换后值。

    30K20

    Angular教程】-组件初识|8月更文挑战

    前提: 准备一个空angular项目(ng new angular-course) 与Angular组件第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...组件相关其他文件暂时先放一放,在Vue开发时候我们创建好组件总是要挂载后才能使用,那angular需要挂载吗?...: 属性绑定+事件绑定, 所以双向绑定语法就是 [(attribute)]="variable" 我们准备一个演示双向绑定组件: ng g c components/sizer 组件中我们需要通过...class2: true, class3: true }"> 绑定一组class试试 NgStyle 在组件html模板中绑定一组style试试 注意需要在module中导入FormsModule,要不然功能无法实现 此时页面恢复正常,通过在输入框中更新内容,页面绑定数据同时更新 管道 angular管道与

    1.9K20

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue...使用模板变量来获取表单 4.内置验证器 min 此验证器要求控件值大于或等于指定数字 max 此验证器要求控件值小于等于指定数字 required 此验证器要求控件具有非空值 requiredTrue...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令外观和行为指令,比如ngstyle 6.属性型指令 6.1

    2.8K50

    Angular学习笔记(一)

    组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...数据绑定 Angular 支持数据绑定,一种让模板各部分与组件各部分相互合作机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。...Angular 使用依赖注入来提供新组件以及组件所需服务。 2. 模板与数据绑定 绑定类型可以根据数据流方向分成三类: 从数据源到视图、从视图到数据源以及双向从视图到数据源再到视图。...'red' : 'green'"> 内置属性型指令 NgClass - 添加或移除一组CSS类 NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应。

    3.3K20

    Angular2 之 结构型指令几个概念

    是这三种指令中最常用,我们会编写大量组件来构建application。 属性型指令 属性型指令会修改元素外观或者行为。 e.g. NgStyle可以修改元素好几个样式。...隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定变更。...template-in-out-of-a2.png 显然,Angular把标签及其内容替换成了一个空白 标签。 这只是它默认行为。.../core'; /** 选中器[],是匹配页面上指令,可以有多个名称,由于是自己指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export...它把指令移到了 标签上,成为该标签一个属性绑定 —— 包装在方括号中。 宿主组件condition 属性布尔值决定该模板内容是否应该被显示。

    3K20

    HTML5 & CSS3初学者指南(2) – 样式化第一个网页

    类名不要以数字开头注意以下关于类选择器几点: 类名不要以数字开头 当你想要选择网页中一组元素时,请使用类 选择器链接 如果一些元素需要设置为相同样式,我们可以通过最少量代码将它们一起设置...CSS字体 文本字体效果可以通过以下 CSS 属性来设置: 字体系列 font-family 属性用于 HTML 文档中文本字体。...经验法则是,你应该总是以你想要字体风格名称开始,并以通常字体系列结尾。这将允许浏览器在所有字体不可用情况,选择近似的字体集合。 试试下面的例子,并在浏览器上查看结果。...注意事项 让我们一起回顾一下今天学习要点: CSS 不区分大小写 选择器名称不能以数字开头 尽可能避免使用内嵌样式表 第二次学习就到这里。...如Wijmo,这是一款大而全面的前端 HTML5 / JavaScript UI控件集,能为企业应用提供更加灵活操作体验,现已全面支持Angular 2

    2.1K70

    AngularDart4.0 指南- 模板语法一 顶

    更多,大括号之间文本是一个模板表达式,Angular首先评估并转换为一个字符串, 通过添加这两个数字来进行以下内插: <!...模板中这种方式创建结构并初始化属性值。...当你写数据绑定时,你只处理目标对象属性(properties)和事件(events)。 HTML属性(attributes)不起作用。 记住这个模型,继续阅读了解绑定目标。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式中任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。...以前缀attr开头,后跟一个点(.)和属性名称代替括号之间元素属性。然后使用解析为字符串表达式来设置属性值。

    5.2K10

    Linux 解决 firefox 中文页面乱码问题

    2.倘若还有乱码,以及其他应用程序乱码,则尝试如下解决方案。   简单暴力方法就是直接去掉默认配置文件。...是多个字体联合组成。 这个文件应该就是进行多字体文件绑定为这两个虚拟字体设置文件。 你 遇到乱码,应该和这个配置无关。我想可能是你程序里面设置了非中文字体。...这样系统会因为字体不全而调用默认字体进行解释, sans serif 两个就是常用默认字体。结果默认字体绑定有问题(毕竟这是西方人东西,字体设置也偏向于西方)。导致文字显示乱码。...或者之前就设置过 sans serif 字体,这个后补内容反而影响了字体设置。这里配置顺序是按照文件名排序,48 开头会优先于这个 49 开头配置。...另外,绑定字体一定要是你系统里面有的字体,不然你系统会忽略这个字体继续下一个,如果你选择中文字体系统里面都没有,会调用失败而无法显示中文。

    8K30

    CSS 基础 之 基础选择器+字体文本相关样式

    类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头 ; 3. 一个标签可以同时有多个类名,类名之间空格隔开 ; 4....关键字: 正常——>normal 加粗 ——>bold 纯数字:100~900整百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细,因此部分取值页面中无变化 实际开发中...从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体 2. 如果都不支持,此时会根据操作系统,显示最后字体系列默认字体 注意点: 1. 如果字体名称中存在多个单词,推荐使用引号包裹 2....从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体 2. 如果都不支持,此时会根据操作系统,显示最后字体系列默认字体 注意点: 1....如果字体名称中存在多个单词,推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3.

    2.1K10

    CSS入门笔记 - 初识CSS

    5.1.2 - 类选择器 类选择器在css样式编码中是最常用到 .className . 开头,名称可包含字母,数字,-,_,但必须字母开头。它区分大小写并可出现多次。...IE7+ [attr|=val] 可以选择val开头开头紧接-属性值。IE7+ [attr^=val] 可选择val开头属性值对应元素,如果值为符号或空格则需要使用引号 ""。...除了各种特定字体系列外(如 Times、Verdana、Helvetica 或 Arial),CSS 还定义了 5 种通用字体系列: Serif 字体 这些字体成比例,而且有衬线。...Sans-serif 字体 这些字体是成比例,而且没有上下短线,这种字体系列在计算机屏幕上更容易识读....Fantasy 字体 这些字体无法用任何特征来定义,只有一点是确定,那就是我们无法很容易地将其规划到任何一种其他字体系列当中。

    2K60

    这9大优势,让Sitecore跨境表现更出色!

    如今提到数字化升级转型,提到跨境出海,总是无法避开一个话题——CMS数字体验平台,相对于说五花八门出海技巧、营销手段,一个好CMS数字平台更像是一个企业发展线上市场基础,有着不可替代性,只有搭建了好...诚如睿哲信息所说,Sitecore众多功能特性让它能够更契合当下企业需求,这也最终推动它在数字体验盛行的当下异军突起,成为了大热门。...九大优势,让Sitecore在数字转型中广受欢迎 Sitecore是一个灵活、强大、多功能数字体验平台,它集全渠道收集数据、消费者洞察、所有渠道统一管理、大规模实现自动化营销于一身,涵盖了从内容到电子商务方方面面...1.可以提供多重功能Sitecore 体验云 Sitecore Experience Cloud™结合端到端内容管理、电子商务与个性化平台于一体,它可以提供内容管理、数字营销和商务等多种工具,让企业可以轻松地推展持续优化数字体验...用户内容使用情况为基准,自动地驱动用户画像形成,进而完成智能归因模型构建,同时它还可以提供智能建议,通过这一系列动作推进,完成对于用户旅程更完整也更为深入分析。

    75520

    Angular 从入坑到挖坑 - 组件食用指南

    在组件类中,通过使用 @Component 装饰器 1 用来将类声明为组件类,并为这个组件类配置一些元数据 2决定该组件在运行期间该如何处理、实例化和使用 装饰器中存在三个基础配置参数,用来完成组件与视图之间关联...4.1.2、模板绑定语法 在 angular 应用中,组件扮演着控制器或是视图模型作用,在创建组件时会关联一个 html 文件,这个 html 文件则是一个基础 angular 模板文件 在这个模板文件中...:数据对象 分类 语法 单向从数据源到视图 1、插值表达式:{{expression}}2、使用 [] 进行绑定:3、使用 bind 进行绑定:<a...text-red、bg-blue 都是 css 类名,如果想要在指定元素上添加该类,则 css 类名对应值为 true,反之则为 false NgStyle:用来设置元素多个内联样式,如果只设置一个内联样式...,应该使用模板绑定语法中样式绑定 NgStyle 属性指令 import { Component, OnInit } from '@

    15.8K30

    R语言圆角柱形图—ggchicklet

    重复开头提到文章过程中还学到了新R包hrbrthemes,粗略看了一下帮助文档,基本功能好像是为ggplot2补充一些主题,主要侧重在字体方面,自己试时候遇到了一堆警告 > warnings()...警告信息: 1: In grid.Call(C_textBounds, as.graphicsAnnot(x$label), ... : Windows字体数据库里没有这样字体系列 2: In...字体数据库里没有这样字体系列 7: In grid.Call(C_textBounds, as.graphicsAnnot(x$label), ... : Windows字体数据库里没有这样字体系列...字体数据库里没有这样字体系列 14: In grid.Call.graphics(C_text, as.graphicsAnnot(x$label), ... : Windows字体数据库里没有这样字体系列...image.png 这里比较神奇数字月份自动被替换成了英文,暂时还不知道如何实现

    1.2K10

    ng 核心模块

    如果你想要保留原始对象,你可以通过一个空目标对象实现:var object = angular.extend({}, object1, object2)。...angular.isString 判断一个引用是不是一个字符串对象 angular.isNumber 判断一个变量是不是数字对象 angular.isDate 判断一个值是不是date angular.isArray...angular.bind 返回一个函数fn,绑定了self参数为这个函数this。你可以再传递一个args参数预先绑定到这个函数上。这个特性也称为局部应用,区别与函数柯里化。...这里柯里化很难理解,还没有理解是怎么一回事。 angular.toJson 序列化对象为JSON格式字符串。属性如果$$开头,则会被排除,因为angular内部使用这个标记。...(当checked有的时候代表true,没有checked时候表示false),如果我们放了一个angular 插值表达式到一个属性中来绑定这个信息,当浏览器删除这个属性时候我们将失去绑定关系。

    1.2K10

    从头学前端-CSS基础01

    ,中文,标签名作为类名)使用时候,class前面加符号.语法如下:.类名{ k:v}一个标签页可以使用多个类名;在标签class属性中,写多个类名,空格分开;id选择器是通过标签Id属性值作为选择器...,id#开始;其他与类选择器类似;相比类选择器,id可以表示一个标签,id只能使用一次;通配符选择器使用*定义,它表示选取页面所有的元素;图片CSS字体属性字体属性用于定义字体系列,大小,粗细和文字样式等...;字体系列:font-family字体大小: font-size; 大小px(像素)为单位;谷歌浏览器默认大小为16px; 一般情况下给body添加此属性;标题标签特殊设置字体粗细:font-weight...: 常用值 normal(400) bold(700) bolder和数字(100-900) 文字样式: font-style 常用值normal和italic字体复合属性:font {font-style...装饰文本: text-decoration 给文本添加下划线,删除线,上划线,默认值:none文本缩进: text-indent 文本首行缩进,用于段落开头;可以取负值,单位px或em行间距: line-height

    1.1K00
    领券