您的位置： >
什么叫淘宝自定义模块？怎么在里面添加文字
来源：刚哥哥网店装修联盟&&&发布时间： 10:42
淘宝自定义模块，也叫自定义内容区，是淘宝旺铺里提供给广大掌柜卖家朋友使用的可以充分自由输入文字、图片的店铺装修区域。刚哥哥给大家介绍演示一下怎么添加自定义模块和输入文字，及相关文字设置（旧版编辑器）。
1、进入淘宝装修后台
2、在装修后台左侧或者右侧底部（扶植版和标准版）找到自定义添加按钮，点击&在此处添加新模块&
点击&自定义内容区&后的&添加按钮&
3、找到添加成功的&自定义内容区&，并鼠标放在模块上，点击右上角出现的&编辑&按钮
4、进入&编辑内容&状态（旧版编辑器）
5、在淘宝自定义里面直接打入文字
6、选中文字，就可以进行文字的其他操作，比如字体、加粗、颜色等设置，下面为淘宝自定义编辑器文字可以使用按钮说明
7、以上为淘宝旧版编辑器文字添加演示。
赞助商链接
最新免费淘宝装修素材
最新免费淘宝装修模板
赞助商链接
刚哥哥网店装修联盟，免费提供淘宝店铺装修教程、淘宝店铺装修图片、淘宝店铺装修代码、淘宝店铺装修素材、淘宝店铺装修模板，让你的网店装修事半功倍。
本站部分内容来源于网络或网友上传，如有侵犯您的权益，请告诉我们，立即删除处理！
Copyright (C)
刚哥哥网店装修联盟 All rights reserved.html5+css3（1）
在项目中用到的web字体现在有三种：Themify Icons、Glyphicons、FontAwnsome，用的时候发现还是有些体图标不存在或者不合适，然后用图片代替了。在空闲时间研究了下FontAwnsome，发现FontAwesome有.eot、.svg、.ttf、.woff、.otf字体文件，然后在css文本由@font-face引入并配合css样式在页面中显示字体图标的。之后在网上查了资料，研究了如何自定义字体的。
FontCreater-字体图标编辑工具，下载地址：
字体文件格式在线转化工具：
使用工具自定义字体图形，并形成字体文件
一、新建工程
打开FontCreater软件，点击 文件-&新建，输入字系名后点确定即可生成带有常规字符轮廓的字体文件，然后将所有的字符轮廓删除即可，也可以选择保留
二、新建字形
在新建字形之前建议把工具栏上面的工具图标的作用先大概了解下，以备使用之需。
1. 新建空白字形
选择插入-&字形或点或点击工具栏的插入字形图标即可新建一个空白的字形
2. 编辑字形：可以选择手动绘制，也可以使用现有的图片生成。手动绘制，选择字形左键双击或者右键单击选择编辑即可打开编辑窗口，然后可以选用手绘、插入轮廓、添加矩形、添加椭圆形等进行绘制；图片生成，右键单击字形选择输入图像，选择本地图片点击打开，显示输入光栅图像，根据需要选择平滑过滤，调整阈值显示出想要的图像后点击生成即可，然后再打开字形进行编辑。（个人建议使用图片，这里用图片做例子）
3. 输入图像生成字形后打开字形编辑窗口，鼠标光标放在图片右上角按住左键向右上角拖动放大（个人建议），不要超出上、下界限，否则超出的部分在使用时显示不出来。
4. 接下来就是对字形图像进行调整。选中点模式，左键单击选中中间的圆点，然后右键单击选中圆点选择”添加点”，此时会新增一个方块点。删除选中的圆点，再选中刚添加的方块点，利用方向键向原来圆点所在的位置移动，四个圆点均如此操作。如果新添加的方块点与原来的方块点不在一条直线上，则会显示明显的折线（如下图第四个图所示），可按住shift键选中在一条线上的四个点（如下图第五个图所示），然后单击工具栏的左对齐/右对齐（根据情况选择），此时四个点就会分布在一条直线上了
5. 下图第一个图中红色圆圈选中的地方有点窄，选中点模式，按住shift键，左键单击同时选中2个点（下图第二个），按住向上方向键移动2-3次，选中轮廓模式，看到的即是最终效果图（下图第三个）。此时，对字形的编辑基本完成。
三、修改字形属性
接下来就是要修改字形的属性
1. 返回工程项目面板，右键单击字形选择字形属性，展示字形的属性面板
2. 修改字形的属性。首先要确定字形的字码点，在网页中嵌入字体的时候就是根据字码点引用展示的。点开字码点后的“选择Unicode字符”，弹出的窗口下拉会看到前端为$E000、末端为$F8FF的私用区（字码点为16进制，个人觉得这个范围的值是为用户自定义字体的字码点的范围，如果有误，请一定指正）。关闭窗口，在字码点输入框定义字码点$E000（按从小到大的顺序，每个字形之间留出2到3个数，留作以后修改添加之用），点击名称输入框后的图表“基于字码点自动完成字形名称”，点击应用即可生效。
3. 修改左侧轴线与右侧轴线的值，这2个值影响字形左右的位置。（在引用调试时会详细说明），左侧轴线0不变，右侧轴线改为0，点击应用，字形的属性即修改完成。
三、生成字体文件并转换格式
1、生成字体文件
选择文件-&输出字体-&输出TrueType/OpenType字体，选择路径并保存，默认生成的是.otf格式的字体文件。
2、转换格式
打开在线转换格式链接：，点击“upload font”按钮选择刚刚生成的字体文件上传，然后选择转换格式的配置，如下图
Subsetting设置为“No Subsetting”,勾选“Shortcuts”记住配置选项，然后勾选“Agreement”，点击“DOWNLOAD YOUR KIT”下载后即可查看所需的文件，文件列表如下：
四、页面上嵌入自定义字体
1、自定义CSS文本，通过@font-face引入字体文本
上一步获取的文件中stylesheet.css的内容是引入字体文本的方式，复制来修改url路径即可。内容如下：
@font-face {
font-family: 'mywebfontregular';
src: url('mywebfont.eot');
src: url('mywebfont.eot?#iefix') format('embedded-opentype'),
url('mywebfont.woff2') format('woff2'),
url('mywebfont.woff') format('woff'),
url('mywebfont.ttf') format('truetype'),
url('mywebfont.svg#mywebfontregular') format('svg');
font-weight: normal;
font-style: normal;
接下来就是嵌入自定义字体需要的CSS样式，首先定义一个字体的全局样式（根据FontAwnsome得来）：
display: inline-block;
font: normal normal normal 14px/1 xhyfontregular;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
定义外围圆圈的CSS（用来测试嵌入字体的位置，展示也更美观）：
.list-icon
line-height: 40px;
white-space: nowrap;
.list-icon
margin-right: 5px;
transition: font-size 0.2s ease 0s;
.ui-icon {
background: transparent none repeat scroll 0 0 !important;
display: inline-block;
height: 1em;
text-align: center;
.ui-icon::after {
background-clip: padding-box;
border-color: inherit;
border-radius: 2em;
border-style: solid;
border-width: 1px;
content: "";
display: block;
height: 2em;
position: relative;
top: -1.5em;
width: 2em;
z-index: 0;
定义字体样式，这里就用到上面所提到的字形的字码点了，上面定义的字形的字码点为$E000，CSS中使用时用E000：
.mf-folderadd {
content: "\E000";
到这里CSS的定义基本完成了，接下来就是在HTML5中使用。
2、在html5中嵌入字体
代码如下：
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&&
rel="stylesheet" href="css/bootstrap.css"&&
rel="stylesheet" href="css/myWebFont.css"&&
class="col-sm-12"&
class="row list-icon"&
class="col-md-3"&
class="ui-icon mf mf-folderadd"&&mf-folderadd
初次显示的效果不是很理想，这就需要慢慢调试了：
首先要说明的一点，调试不需要使用所用的字体文件，我这里使用的是.woff文件，360浏览器即可支持，.woff文件使用FontCreater输出即可。这里我每次修改完就默认已经输出到.woff文件了，不再重复缀赘述。调试的时候将@font-face改为：
@font-face {
font-family: 'mywebfontregular';
src: url('../../../fonts/MyWebFont.woff');
font-weight: normal;
font-style: normal;
接下来开始调试。
首先，这里字形明显偏小而且位置不居中，先把字形调大，双击字形打开编辑窗口，按Ctrl+A全选字形，鼠标放到右上角向右上角拖拽，切记不要超出尚界线，然后返回工程窗口右键单击字形查看字形属性，将右侧轴线改为&=0的值（视情况而定）。调整到大小差不多的时候再调位置，左右调整在右键单击字形查看属性面板中调整左右两侧轴线的值，上下调整是在双击字形打开的窗口中全选字形然后按住方向键上下调整即可，直到调整的差不多，用软件输出.otf格式的字体文件，然后用在线转换工具转换即可。最后把@font-face改回原来的，再把fonts文件夹下的所有字体文件覆盖掉就完成了整个调试。此时就大功告成，界面显示如下：
这样Themify Icons、Glyphicons、FontAwnsome三种字体配合自定义的字体就能够在web字体中恣意纵横了。
我自己做了个小例子，下载地址：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3624次
排名：千里之外
(1)(1)(4)(1)可以加长到支持13个汉字的超长LOGO模板
文字教程首先要做的通常就是使用文字工具，在文件中输入文字，这...
热门LOGO模板
Powered by