SpreadJS单元格字体设置

SpreadJS中Style是我们经常使用的功能,而字体也是其中比较重要的一部分,今天我们详细说说字体的设置使用。

发布于 2016/06/28 00:00

SpreadJS中Style是我们经常使用的功能,而字体也是其中比较重要的一部分,今天我们详细说说字体的设置使用。

SpreadJS单元格的字体设置是遵守CSS font 属性规则,通过设置SpreadJS中Style的font属性可改变字体样式。例如设置style.font = 'italic small-caps bold 20pt/22pt "Times New Roman",Georgia,Serif'; 可以得到如下效果。只需要根据css font 属性规则设置不同参数即可。

549E.tmp

SpreadJS并没有提供针对font-size、font-weight等属性的单独设置,如果我们希望更新一个单元格字体的某个属性,可以借助HTML元素。下面代码中我们使用JQuery创建一个DOM元素,将单元格font复制给span,然后使用JQuery的css方法改变font不同属性的内容,最后获取font字符串,重新设置到单元格Style。

$("#btnChangeFont").click(function(){
	var cssStyle = activeSheet.getStyle(2,2) || new GcSpread.Sheets.Style();
	var fontElement = $("<span></span>");
        fontElement.css("font", cssStyle.font);
        fontElement.css("font-style", 'oblique');
        fontElement.css("font-variant", 'normal');
        fontElement.css("font-weight", 'lighter');
        fontElement.css("font-size", '300%');
        fontElement.css("font-family", 'arial,sans-serif');
        cssStyle.font = fontElement.css("font");
        activeSheet.setStyle(2,2,cssStyle,GcSpread.Sheets.SheetArea.viewport);
});

只要理解了font属性的设置规则,改变字体就不是什么困难的事情了。上面代码执行后效果

5E49.tmp

RunJS在线演示地址:http://runjs.cn/detail/nbgiedkf

 

更多资源

SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态