欢迎您光临湖北元润科技有限公司!
电话图标 全国热线:0717-6901988

观点争锋

这里记录着我们每一个前行的足迹

当前位置:首页 > 观点争锋

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

时间:2020-08-28 23:36:37   阅读:565045

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





标签:
相关新闻
最新新闻
最新网站设计案例
  • 壁虎科技
    壁虎科技

    壁虎科技是国内发展迅猛的新兴消费金融服务供应商,公司成立于2014年,总部位于大连。在互联网金融服务蓬勃发展之际,壁虎金融快速跻身国内消费金融服务行业优秀企业前列。

  • 上海星馨装潢公司(官网)
    上海星馨装潢公司(官网)

    上海星馨装饰设计有限公司成立于2007年,是以家装为主,涉足商装、建材等相关产业的专业性装饰公司。具有施工、设计三级资质。通过多年的努力,在业内外形成了良好的口碑。公司先后荣获“住宅装饰装修行业自律诚信单位”、“住宅装饰装修优秀企业”、“住宅装饰装修示范优秀奖”等多项殊荣,并多次在家居装饰设计大赛中获奖。

  • 宇阳能源
    宇阳能源

    eyd(宇阳能源)是一个以高品质、可信赖为诉求的3C数码配件品牌,由前香港上市公司宇阳科技核心高管开创,总部设立中国的电子产品之都深圳,生产基地位于东莞凤岗宇阳科技园。

  • 我们能做什么

    以软件开发为核心,覆盖企业办公、政务OA、微信小程序、电子商务、大数据、SEO、云平台等周边领域,产品线涵盖YRSHOP、微信小程序、YROA、YRCMS、YRSMS、YRCLOUD及YREM,服务范围覆盖涵盖域名服务、云服务器、企业邮箱、网站建设、网络营销、SEM运维、自助建站、企业信息化培训等领域,元润科技在企业级市场,坚持技术创新的价值愿景,为企业用户提供丰富更加便利、持续的一站式解决方案和增值应用。

  • 我们的优势

  • 更多 +关于我们

    湖北元润科技有限公司(以下简称元润科技),成立于2012年,定位为富媒体整合推广服务商,是华中地区优秀软件开发企业,政府采购软件供应商,精准扶贫指定软件开发企业,创新型成长企业,河南电信战略合作伙伴。产品行销大连、北京、上海、杭州、广州、深圳、柳州、昆明、惠州、加拿大多伦多、印度等地,元润科技在企业级市场,坚持技术创新的价值愿景,为企业用户提供丰富更加便利、持续的一站式解决方案和增值应用。

还没有自己的网站!

元润科技全系云建站系统,不懂代码也能让您轻松维护网站、修改网站

我也要一个自己网站

旗下站点更多 +

Copyright @ 2020-2021 Yuanrun Technology Co., LTD. All Rights Reserved.