我们的优势: 专业网站建设公司,顶尖设计师量身定制 配备高配置主机,BGP多线,高速访问 99.999%网站数据可靠性 免费提供快速ICP备案 快速解决网站问题
您的位置:首页 > 观点争锋

kindeditor编辑器定制字体名称fontName或fontFamily的方法

来源: | 浏览量:564606 | 发布时间:2020-08-28 23:36:37

kindeditor编辑器因为人性化和可定制性,因此在国内使用率很高。今天就为朋友们聊聊怎么在kindeditor编辑器中添加字体样式及字体大小?

kindeditor编辑器定制字体名称fontName或fontFamily的方法:

1、用DW或记事本打开 kindeditor目录下lang文件中的zh-cn.js 文件,搜索fontname ;
2、复制下面的这段代码,添加到源文件中即可。如果需要其他字体样式,到网上搜索相应的字体名称,按照代码样式添加即可。(代码格式:前为字体值,后为字体名,千万不要弄混了!)
’fontname.fontName’ : {
’SimSun’ : ’宋体’,
’NSimSun’ : ’新宋体’,
’FangSong_GB2312’ : ’仿宋_GB2312’,
’KaiTi_GB2312’ : ’楷体_GB2312’,
’SimHei’ : ’黑体’,
’Microsoft YaHei’ : ’微软雅黑’,
’Century Gothic’ : ’Century Gothic’,
’Coudy Old Style’ : ’Coudy Old Style’,
’Bank Gothic LT BT’ : ’Bank Gothic LT BT’,
’Arial’ : ’Arial’,
’Arial Black’ : ’Arial Black’,
’Times New Roman’ : ’Times New Roman’,
’Courier New’ : ’Courier New’,
’Tahoma’ : ’Tahoma’,
’Verdana’ : ’Verdana’
},



kindeditor编辑器添加字体大小(fontSize)的方法:

1、打开下载到的或者网站程序文件 kindeditor 目录下的 kindeditor.js 文件,搜索fontSizeTable 
2、在fontSizeTable : [’9px’, ’10px’, ’12px’, ’14px’, ’16px’, ’18px’, ’24px’, ’32px’]中添加自己需要的字体大小就可以了。
小编在此把常用的字体写好,直接复制下面的代码替换源代码即可:
fontSizeTable : [’9px’, ’10px’, ’12px’, ’14px’, ’16px’, ’18px’,  ’20px’, ’22px’, ’24px’,  ’26px’,  ’28px’,  ’30px’, ’32px’]


操作完毕后,登录到网站后台,到添加内容界面,会发现kindeditor编辑器自动添加新的样式。



如果没有变化,请不要惊慌,这是因为网站缓存或是浏览器问题,到网站后台清除缓存(如果没有此功能,不必操作!),然后清除浏览器缓存,重新打开网站后台即可看到新样式。




常用字库:

常用字体对应表:

HTML,CSS,font-family:中文字体的英文名称

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体:SimSuncss中中文字体(font-family)的英文名称

Mac OS的一些:

华文细黑:STHeiti Light [STXihei]

华文黑体:STHeiti

华文楷体:STKaiti

华文宋体:STSong

华文仿宋:STFangsong

儷黑 Pro:LiHei Pro Medium

儷宋 Pro:LiSong Pro Light

標楷體:BiauKai

蘋果儷中黑:Apple LiGothic Medium

蘋果儷細宋:Apple LiSung Light

Windows的一些:

新細明體:PMingLiU

細明體:MingLiU

標楷體:DFKai-SB

黑体:SimHei

新宋体:NSimSun

仿宋:FangSong

楷体:KaiTi

仿宋_GB2312:FangSong_GB2312

楷体_GB2312:KaiTi_GB2312

微軟正黑體:Microsoft JhengHei

微软雅黑体:Microsoft YaHei

装Office会生出来的一些:

隶书:LiSu

幼圆:YouYuan

华文细黑:STXihei

华文楷体:STKaiti

华文宋体:STSong

华文中宋:STZhongsong

华文仿宋:STFangsong

方正舒体:FZShuTi

方正姚体:FZYaoti

华文彩云:STCaiyun

华文琥珀:STHupo

华文隶书:STLiti

华文行楷:STXingkai

华文新魏:STXinwei

@网站应用:

  1. 京东body和字体初始化代码(借鉴):
    a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
    }
    body {
    background: #fff none repeat scroll 0 0;
    color: #666;
    font: 12px/150% Arial,Verdana,“宋体”;
    }

  2. 黄淮字体初始化代码(反面教材):
    body {

    color: #666;
    font-family: “宋体”,“SimSun”;
    font-size: 12px;
    line-height: 1.5;
    }
    —宋体在显示英文时很丑,例如小写的g

  3. 物通网字体初始化代码:
    body {
    background: #fff none repeat scroll 0 0;
    color: #333333;
    font-family: Tahoma,Arial,“宋体”;
    font-size: 12px;
    line-height: 22px;
    margin: 0;
    padding: 0 0 12px;
    }

  4. 新一站body和字体初始化代码(借鉴):
    body, html {
    font-family: Tahoma,Arial,“Hiragino Sans GB”,simsun,sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.6;
    }
    a, abbr, acronym, address, article, aside, audio, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, iframe, img, ins, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, section, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
    border: 0 none;
    margin: 0;
    padding: 0;
    }

  5. 淘宝body和字体初始化代码(借鉴):
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    }
    body, button, input, select, textarea {
    font: 12px/1.5 tahoma,arial,“Hiragino Sans GB”,宋体,sans-serif;
    }

  6. 锤子科技body和字体初始化代码(借鉴):
    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    }
    body {
    color: #666;
    font-family: Helvetica,Arial,“Hiragino Sans GB”,“Microsoft Yahei”,“微软雅黑”,STHeiti,“华文细黑”,sans-serif;
    font-size: 14px;
    }

  7. 新浪body和字体初始化代码(借鉴):
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
    }
    body {
    background: #fff none repeat scroll 0 0;
    color: #333;
    font: 12px/20px “SimSun”,“宋体”,“Arial Narrow”,HELVETICA;
    padding: 5px 0;
    }
    .main-nav {
    font-family: “Microsoft YaHei”,“微软雅黑”,“SimSun”,“宋体”;
    }
    body, td, th {
    font-family: 宋体;
    }
    —整站大部分用的是宋体16x/26x

@CSS设置字体方法

  1. CSS如何控制字间距?

在需要设置的CSS标签下加入一下代码即可。 word-spacing:8px; letter-spacing: 1px; 具体是哪个自己配置测试下。

@CSS,font-family,好看常用的中文字体

转载自http://www.zreading.cn/ican/2014/10/css-font-family/

例1(小米米官网):font-family: “Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif;

例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,‘宋体’,sans-serif;

例3(加网 ):font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;

例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

例5(一淘UX):font-family: Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;

font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

—总结百家所长:font: 12px/150% Tahoma,Helvetica,Arial,Verdana,“Microsoft YaHei”,“SimSun”,“宋体”;

Windows 中的中文字体。
在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:

Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312

Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)

Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
那么每种字体能显示那些汉字呢?

Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集,
楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
(注:Windows 3.X 只能支持 GB2312-80 字符集)

Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集,

SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。
下面对字符集进行简单的介绍:

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

GB2312-80 中的字符数量最少,GB18030-2005 字符数量最多。

GB2312-80 是最早的版本,字符数比较少;

GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同;

GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同,主要增加了扩展 A 部分;

GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同,主要增加了扩展 B 部分;

由于 Unicode 5.2 的发布,估计 GB18030 会在近期发布新版本,增加扩展 C 部分。

需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

如果想查看 GB18030 的标准文本,请访问 http://www.gb168.cn 中的强标阅读。

如果想了解 Unicode 的内容,请访问 http://www.unicode.org。

现在纠正网上普遍的一个错误:
GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号
与简体中文有关的代吗页如下:

936 gb2312 简体中文(GB2312)————其实是GBK

10008 x-mac-chinesesimp 简体中文(Mac)

20936 x-cp20936 简体中文(GB2312-80)

50227 x-cp50227 简体中文(ISO-2022)

51936 EUC-CN 简体中文(EUC)

52936 hz-gb-2312 简体中文(HZ)

54936 GB18030 简体中文(GB18030)

补充:

使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。

这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。

@总结:

  1. Arial出镜率最高,一般在第二位,Arial 确实是前 ClearType 时代 Windows 里最好的几个
    正文字体之一(还有 Verdana 和 Tahoma 等)。
  2. 其次是Tahoma,3个大网站把它放在第一位。
  3. 宋体,“SimSun”—微软宋体,一般放在最后两位。
  4. 总结,使用原则------Tahoma,Arial,Verdana可以放在前边,宋体放在最后。其他可以尝试用下微软雅黑等字体。

字体名称最好写成英文,否则编码问题有些地区可能看到的是乱码
1.simsun=宋体

2.在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif(偏粗,厚)和Serif(偏细)
—Verdana等则属于Sans Serif字体。对中文而言,同样存在这两大种类,很明显,
宋体、细明体(繁体中常用)等就属于Serif,而黑体、幼圆等则属于Sans Serif。

3.Microsoft Yahei微软雅黑

4.tahoma字体,Tahoma和Verdana师出同门,同为名设计师马修·卡特的作品。
—xyz首选字体

5.Arial,xyz次选字体

6.不会设计,仿好的网站,例如新一站的字体初始化代码:font-family: Tahoma,Arial,“Hiragino Sans GB”,“simsun”,sans-serif;

windows常见内置中文字体

字体中文名             字体英文名                                效果实例

 

宋体                      SimSun(浏览器默认)             夏目友人帐/ABCDEFG

 

黑体                      SimHei                                      夏目友人帐/ABCDEFG

 

微软雅黑               Microsoft Yahei                        夏目友人帐/ABCDEFG

 

微软正黑体            Microsoft JhengHei                  夏目友人帐/ABCDEFG

 

楷体                       KaiTi                                        夏目友人帐/ABCDEFG

 

新宋体                   NSimSun                                夏目友人帐/ABCDEFG

 

仿宋                       FangSong                               夏目友人帐/ABCDEFG

 

OS X常见内置中文字体

字体中文名    字体英文名

苹方                      PingFang SC                     

 

华文黑体               STHeiti                             

 

华文楷体               STKaiti                                  夏目友人帐/ABCDEFG

 

华文宋体               STSong                                 夏目友人帐/ABCDEFG

 

华文仿宋               STFangsong                         夏目友人帐/ABCDEFG

 

华文中宋               STZhongsong                       夏目友人帐/ABCDEFG

 

华文琥珀               STHupo                                夏目友人帐/ABCDEFG

 

华文新魏               STXinwei                              夏目友人帐/ABCDEFG

 

华文隶书               STLiti                                    夏目友人帐/ABCDEFG

 

华文行楷               STXingkai                             夏目友人帐/ABCDEFG

 

冬青黑体简            Hiragino Sans GB                    

 

兰亭黑-简               Lantinghei SC                      

 

翩翩体-简               Hanzipen SC

 

手札体-简               Hannotate SC

 

宋体-简                   Songti SC                          夏目友人帐/ABCDEFG

 

娃娃体-简                Wawati SC

 

魏碑-简                    Weibei SC

 

行楷-简                    Xingkai SC                         

 

雅痞-简                    Yapi SC

 

圆体-简                    Yuanti SC

 

office安装后新增字体

字体中文名    字体英文名

幼圆                      YouYuan                           夏目友人帐/ABCDEFG

 

隶书                      LiSu                                   夏目友人帐/ABCDEFG

 

华文细黑               STXihei                             夏目友人帐/ABCDEFG

 

华文彩云               STCaiyun                           夏目友人帐/ABCDEFG

 

方正舒体               FZShuTi                             夏目友人帐/ABCDEFG

 

方正姚体               FZYaoti                            

 

开源字体

字体中文名    字体英文名

思源黑体              Source Han Sans CN

 

思源宋体              Source Han Serif SC

 

文泉驿微米黑       WenQuanYi Micro Hei

 

版权字体(汉仪)

字体中文名    字体英文名

汉仪旗黑              HYQihei 40S

 

汉仪旗黑              HYQihei 50S

 

汉仪旗黑              HYQihei 60S

 

汉仪大宋简           HYDaSongJ

 

汉仪楷体               HYKaiti

 

汉仪家书简            HYJiaShuJ

 

汉仪PP体简           HYPPTiJ

 

汉仪乐喵体简         HYLeMiaoTi

 

汉仪小麦体             HYXiaoMaiTiJ

 

汉仪程行体             HYChengXingJ

 

汉仪黑荔枝             HYHeiLiZhiTiJ

 

汉仪雅酷黑W          HYYaKuHeiW

 

汉仪大黑简             HYDaHeiJ

 

汉仪尚魏手书W      HYShangWeiShouShuW

 

版权字体(方正)

字体中文名    字体英文名

方正粗雅宋简体    FZYaSongS-B-GB

 

方正报宋简体        FZBaoSong-Z04S

 

方正粗圆简体        FZCuYuan-M03S

 

方正大标宋简体     FZDaBiaoSong-B06S

 

方正大黑简体         FZDaHei-B02S

 

方正仿宋简体         FZFangSong-Z02S

 

方正黑体简体         FZHei-B01S

 

方正琥珀简体         FZHuPo-M04S

 

方正楷体简体         FZKai-Z03S

 

方正隶变简体         FZLiBian-S02S

 

方正隶书简体         FZLiShu-S01S

 

方正美黑简体         FZMeiHei-M07S

 

方正书宋简体         FZShuSong-Z01S

 

方正舒体简体         FZShuTi-S05S

 

方正水柱简体         FZShuiZhu-M08S

 

方正宋黑简体         FZSongHei-B07S

 

方正宋三简体         FZSong

 

方正魏碑简体         FZWeiBei-S03S

 

方正细等线简体      FZXiDengXian-Z06S

 

方正细黑一简体      FZXiHei I-Z08S

 

方正细圆简体          FZXiYuan-M01S

 

方正小标宋简体       FZXiaoBiaoSong-B05S

 

方正行楷简体           FZXingKai-S04S

 

方正姚体简体           FZYaoTi-M06S

 

方正中等线简体       FZZhongDengXian-Z07S

 

方正准圆简体           FZZhunYuan-M02S

 

方正综艺简体           FZZongYi-M05S

 

方正彩云简体           FZCaiYun-M09S

 

方正隶二简体           FZLiShu II-S06S

 

方正康体简体           FZKangTi-S07S

 

方正超粗黑简体        FZChaoCuHei-M10S

 

方正新报宋简体        FZNew BaoSong-Z12S

 

方正新舒体简体        FZNew ShuTi-S08S

 

方正黄草简体            FZHuangCao-S09S

 

方正少儿简体            FZShaoEr-M11S

 

方正稚艺简体            FZZhiYi-M12S

 

方正细珊瑚简体         FZXiShanHu-M13S

 

方正粗宋简体             FZCuSong-B09S

 

方正平和简体             FZPingHe-S11S

 

方正华隶简体             FZHuaLi-M14S

 

方正瘦金书简体          FZShouJinShu-S10S

 

方正细倩简体              FZXiQian-M15S

 

方正中倩简体              FZZhongQian-M16S

 

方正粗倩简体              FZCuQian-M17S

 

方正胖娃简体               FZPangWa-M18S

 

方正宋一简体               FZSongYi-Z13S

 

方正剪纸简体               FZJianZhi-M23S

 

方正流行体简体           FZLiuXingTi-M26S

 

方正祥隶简体               FZXiangLi-S17S

 

方正粗活意简体            FZCuHuoYi-M25S

 

方正胖头鱼简体            FZPangTouYu-M24S

 

方正卡通简体                FZKaTong-M19S

 

方正艺黑简体                FZYiHei-M20S

 

方正水黑简体                FZShuiHei-M21S

 

方正古隶简体                FZGuLi-S12S

 

方正幼线简体                FZYouXian-Z09S

 

方正启体简体                FZQiTi-S14S

 

方正小篆体                    FZXiaoZhuanTi-S13T

 

方正硬笔楷书简体          FZYingBiKaiShu-S15S

 

方正毡笔黑简体              FZZhanBiHei-M22S

 

方正硬笔行书简体           FZYingBiXingShu-S16S




阅读提示:

      湖北元润科技有限公司(网址:www.yuanrungroup.com)成立于2012年,定位为富媒体整合推广服务提供商。多年来,公司致力于为企业客户提供完整的互联网应用服务,服务范围涵盖基础的域名服务、虚拟主 机、企业邮箱、网站建设、网络营销、服务器租用、服务器托管、CDN加速等领域。公司始终秉承以客户利益为中心 的公司理念,致力于向各行业网络用户提供定制化运营方案,为协助客户成为其所在行业的网络领先品牌而不懈努力。
      2015年公司战略调整,以软件开发为核心覆盖企业办公,政务OA,微信营销,电子商务,大数据, SEO等周边领域,成功完成了宜昌某政府改版项目,宜昌某局改版项目,某发改委建设项目,某师大建设项目,武汉某农业政务改版项目。同年 成功完成青岛研发中心和武汉开发中心的部署。目前服务于4家上市公司日照港,宇阳集团,湖北能源,昆仑能源; 本土100余家,业务辐射大连,北京,上海,杭州,广州,深圳,柳州,昆明等地。经客户同意公开的优秀作品有迪亚罗兰,红味西饼,锦港企业,宇阳集团,陈氏木业,东盛云企业,希捷硬盘,罗技鼠标等。元润科技已经为300+客户提供技术支持,服务在酒店,家居,食品,化工,机械,建筑,整形,政务,农产品,制造等多个领域,未来我们将覆盖更多领域,成为真正的中小企业信息化领航企业。

      元润科技面向宜昌,荆州,恩施等地区提供高端网站建设,高端网站设计,高端网站制作,网站改版,OA系统开发,政务系统开发,微信开发,客户端开发,商城系统建设,SEO优化,软件二开,智慧城市,服务器托管,UI设计等全方位的信息化解决方案。





聚合标签:

现在填写联系方式,即可获得一对一客服服务

您的信息已提交成功!

客户经理会在24小时内与您联系! 立即咨询 咨询电话: 0717-6901988