一个不错的angular 字体库( 引用js文件就行)

最新推荐文章于 2024-05-22 10:01:58 发布
最新推荐文章于 2024-05-22 10:01:58 发布
阅读量100 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/oxspirt/p/6027315.html
本文介绍了如何在 Angular 应用程序中使用 Material 图标。包括引入库文件、定义模块依赖、在 HTML 视图中使用 ng-md-icon 指令的方法，并展示了如何自定义图标颜色和大小。

https://klarsys.github.io/angular-material-icons/

 

使用方法：

1.引入这个js文件，

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script> 

2. 定义module 的依赖

angular.module('demoapp', ['ngMdIcons']);

3. 在html视图文件中， 使用ng-md-icon 指令：

<ng-md-icon icon="delete"></ng-md-icon>

4.效果

 ps: 关键是可以自定义颜色和大小

效果图

 

<ng-md-icon icon="delete" style="fill: pink" size="18px"></ng-md-icon>

 



 

转载于:https://www.cnblogs.com/oxspirt/p/6027315.html

                

        




    

    
  



    



                



	

		

			

				
					
【面试宝典】60道Angular高频题库整理(附答案背诵版)

				
			

			

				

					tyler的博客
				

				

					08-12
					
					5862
					
				

			

		

		

			
				
除了使用内置过滤器外，AngularJS 也允许创建自定义过滤器。自定义过滤器可以通过.filter方法定义，该方法接受一个过滤器名称和一个工厂函数，工厂函数返回一个过滤函数。过滤函数接受输入数据，并返回转换后的输出。// 处理输入数据，返回转换后的输出});在模板中使用自定义过滤器：</AngularJS 的过滤器是一种强大的工具，用于视图层的数据转换和格式化。通过使用过滤器，开发者可以在不修改原始数据的情况下，改变数据的显示方式，从而使得视图更加灵活和动态。

			
		

	



                

            
              



	

		

			

				
					
07-字体及文本样式

				
			

			

				

					m0_49233445的博客
				

				

					08-20
					
					660
					
				

			

		

		

			
				
字体及文本样式
1.文本属性


字体颜色   color


打开或关闭斜体文字    font-style


设置字体粗细程度    font-weight


设置字体大小   font-size


设置文字指定的特殊的字体，浏览器只会使用浏览器可以访问到的字体    font-family


网络字体   webFont


设置或取消文本修饰    text-decoration


设置文字排列方式   text-align


设置文本缩进   text-indent


设置或取消字体

			
		

	



              


  
              

                


	

		

			

				
					
JavaScript字体操作库Plumin.js.zip

				
			

			

				

					07-18
				

			

		

		

			
				
Plumin.js 是一个用在浏览器和 Node.js 上对字体进行操作的 JavaScript 库，示例代码：(function(p) {

var font = new p.Font({
        familyName: 'Demo',
        ascender: 800,
        descender: -100
    }),
    a = new p.Glyph({
        name: 'a',
        unicode: 'a',
        advanceWidth: 496
    }),
    i = new p.Glyph({
        name: 'i',
        unicode: 'i',
        advanceWidth: 268
    }),
    o = new p.Glyph({
        name: 'o',
        unicode: 'o',
        advanceWidth: 536
    }),
    shape;

// a contour
shape = new p.Path.RegularPolygon({
    center: [268, 124],
    sides: 3,
    radius: 248
});
shape.rotate(180, [268, 124]);
shape.scale(1, 1.4, [268, 0]);
a.addContour(shape);

// i contour
shape = new p.Path.Rectangle({
    point: [60, 0],
    size: [140, 500]
});
i.addContour(shape);

// o contour
shape = new p.Path.Ellipse({
    point: [50, 0],
    size: [436, 510]
});
o.addContour(shape);

font.addGlyphs([ a, i, o ]);
font.updateOTCommands()
    .addToFonts();

})(plumin.paper);
                        
                        
                            标签：Plumin

			
		

	





	

		

			

				
					
如何在Angular框架中更好地使用字体？一篇文章解答！

				
			

			

				

					需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
				

				

					12-23
					
					1547
					
				

			

		

		

			
				
本文介绍如何轻松将字体整合到Angular中，从而自定义Angular应用的外观~

			
		

	



		

			
		



	

		

			

				
					
Vue.js 字体库引用

				
			

			

				

					Corn___的博客
				

				

					08-19
					
					630
					
				

			

		

		

			
				
Vue.js 字体库引用

			
		

	





	

		

			

				
					
ArcGIS JavaScript 使用本地字体库

				
			

			

				

					long的博客
				

				

					11-03
					
					2923
					
				

			

		

		

			
				
ArcGIS JavaScript默认使用的是他们域名里的字体库，如果在没有互联网的情况下，有可能会导致访问字体库失败。ArcGIS使用的字体格式不是window系统常用的.ttf

			
		

	





	

		

			

				
					
jslibrary-angular-app:这是一个简单的网络应用程序，显示 Javascript 世界中最好的书籍！

				
			

			

				

					07-02
				

			

		

		

			
				
描述中提到 "只需在您喜欢的浏览器中运行 index.html 即可"，这表明该应用程序是一个静态文件项目，其中 `index.html` 是入口文件，包含了应用程序的初始化代码和对 Angular 库的引用。用户无需安装任何额外软件，只...

			
		

	





	

		

			

				
					
这是一个基于angular而开发的豆瓣移动站单页面应用demo

				
			

			

				

					08-10
				

			

		

		

			
				
标题中的“基于Angular开发的豆瓣移动站单页面应用demo”表明了这个项目是一个使用Angular框架构建的移动端Web应用程序，主要用于模仿或实现豆瓣网的移动站点功能。Angular是Google维护的一个强大的前端开发框架，它...

			
		

	





	

		

			

				
					
WEB-Node-Angular-HTML-CSS-:html文件

				
			

			

				

					06-24
				

			

		

		

			
				
Node.js是JavaScript的一个运行环境，它使得开发者能够在服务器端使用JavaScript编写代码。Node.js使用V8引擎，提供了丰富的库和API，可用于构建高效、可扩展的网络应用，如实时聊天、文件传输和API服务等。在Web...

			
		

	





	

		

			

				
					
JavaScript字体工具包Font.js.zip

				
			

			

				

					07-17
				

			

		

		

			
				
Font.js 是一个强大的JavaScript字体工具包，可处理字体加载事件、metrics 信息以及更好的画布元素的 measureText 方法，可获取字体高度边框等信息。 
在线演示：http://pomax.nihongoresources.com/pages/Font.js/ 
示例代码： 
var font = new Font();
font.onload = function() {
    // measure some text
    console.log(font.measureText("some text", 14));
    
    // style an element
    document.querySelector("p").style.fontFamily = "'"   font.fontFamily   "'";
}

font.onerror = function(e) {
   alert(e);
}

// kick off the actual loading
font.fontFamily = "My Font";
font.src = "acmesa.ttf";
                        
                        
                            标签：Fontjs

			
		

	





	

		

			

				
					
Angular项目中引入awesome字体<i>元素

				
			

			

				

					Jack汪喆的技术分享栏
				

				

					02-03
					
					652
					
				

			

		

		

			
				

在公司直接使用&lt;i&gt;即可使用对应的awesome字体，笔者以为直接使用即可，没想到也同样需要引入，本文将介绍angular如何引入awesome字体元素


安装awesome字体元素npm install font-awesome
在angular.json文件中的styles数组中引入"node_modules/font-awesome/css/font-awesome.css"...

			
		

	





	

		

			

				
					
推荐开源项目：ttf.js - JavaScript TrueType 字体引擎

					
最新发布

				
			

			

				

					gitblog_00032的博客
				

				

					05-22
					
					476
					
				

			

		

		

			
				
推荐开源项目：ttf.js - JavaScript TrueType 字体引擎
1、项目介绍
在网页设计和开发中，字体渲染是一项至关重要的任务。ttf.js 是一个专门为现代浏览器和 Node.js 环境设计的 JavaScript 库，它实现了TrueType字体引擎，让你能够在前端轻松处理各种复杂的字体操作。
2、项目技术分析
ttf.js 的核心在于对TrueType字体规格的实现。它能够...

			
		

	





	

		

			

				
					
ArcGIS API for JavaScript字体库下载及本地字体库配置

				
			

			

				

					lvxinyuyandan的专栏
				

				

					03-10
					
					1824
					
				

			

		

		

			
				
ArcGIS JS 4 本地字体库下载和配置

			
		

	





	

		

			

				
					
项目中引入外部字体文件

				
			

			

				

					m0_59411260的博客
				

				

					03-28
					
					408
					
				

			

		

		

			
				
assets中创建font文件夹，放下载的字体文件（.otf/ .ttf/.woff）和font.scss文件
	font.scss文件如图
	
	
	在main.ts中引入
	import '@/assets/font/font.scss'
	
	在style标签中，就可以用了
	
	


			
		

	





	

		

			

				
					
js检测浏览器支持的字体

				
			

			

				

					学如逆水行舟，不进则退
				

				

					07-27
					
					6034
					
				

			

		

		

			
				
通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择

轉載出處

字体函数：


var dataFont = {
    windows: [{
        ch: '宋体',
        en: 'SimSun'
    }, {
        ch: '黑体',
        en: 'SimHei'
    }, {
        ch: '微软雅黑',
     ...

			
		

	





	

		

			

				
					
【已解决】在Angular 中使用思源黑体

				
			

			

				

					weixin_43494119的博客
				

				

					08-06
					
					1224
					
				

			

		

		

			
				
在项目中如何正确使用思源字体

			
		

	





	

		

			

				
					
angular整合ngx-quill，设置自定义字体

				
			

			

				

					Redolently的博客
				

				

					08-04
					
					589
					
				

			

		

		

			
				
二、在angular.json引入font.css文件，进行覆盖默认样式。一定要加上class="ql-editor"该类名，否则样式也不起作用。一、先创建一个名为font的.css文件,然后引入自定义css。例如：在app.module.ts中引入。

			
		

	





	

		

			

				
					
Angular官方字体Awesome组件使用与实践

				
			

			

				

					
				

			

		

		

			
				
Angular_FONT Awesome.zip这个压缩文件包很可能包含的是一个Angular项目，该项目利用了Font Awesome库来展示图标。包内的angular-fontawesome-master文件名暗示了这是个主分支的目录结构，可能包含了Angular项目的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值