CN104915207A - 制作网页图标方法及其系统 - Google Patents
制作网页图标方法及其系统 Download PDFInfo
- Publication number
- CN104915207A CN104915207A CN201510328892.2A CN201510328892A CN104915207A CN 104915207 A CN104915207 A CN 104915207A CN 201510328892 A CN201510328892 A CN 201510328892A CN 104915207 A CN104915207 A CN 104915207A
- Authority
- CN
- China
- Prior art keywords
- icon
- web
- interface
- webpage
- designing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明提出了一种制作网页图标方法及其系统，本发明将图标转化为字体格式；再将转化为字体格式的图标嵌入网页的界面中。本发明将图标转化成字体格式嵌入到网页的界面中，可以减少网页加载时http请求的次数，从而提升了网页的界面加载速度。
Description
技术领域
本发明涉及一种制作网页的方法，尤其是关于制作网页图标的方法。
背景技术
随着互联网的发展，互联网产品的快速增长。为了使直接的互联网产品能更简洁明了、亮丽直观些，网页的图形界面就显得尤为重要，并且界面的加载的速度直接影响用户的使用体验。
目前的做法是，如果一个网页的界面中有多个图标，多少个图标就多少张图片，然后把图片加载到指定位置。此方法，每张图片在加载到界面中都会发一个http请求，如果图片比较多，在一定程度上影响界面的加载性能。另外，如果显示图片的大小需要做更改的话又会影响图片的质量。
有多少个图片就有多少次http的请求，这样占用资源，影响加载速度。如果图片需要放大或者缩小比例又会影响图片显示的质量，影响视觉效果。
发明内容
本发明需解决的技术问题是提供一种能提升页面加载速度的制作网页图标方法。
为解决上述的技术问题，本发明设计了一种制作网页图标方法，包括包括以下步骤：步骤1：将图标转化为字体格式；步骤2：将转化为字体格式的图标嵌入网页的界面中。
作为本发明进一步改进，还包括创建一文件夹的步骤；将图标转化为字体格式后再存放在该文件夹中。
作为本发明进一步改进，将转化后的图标均命名。
作为本发明进一步改进，在网页的界面中需要显示图标的位置定义一个唯一的ID名称，再设置该ID名称的样式值，在样式值中用content属性来对应要显示图标的名称，从而使图标嵌入网页的界面中。
作为本发明进一步改进，通过设置ID名称的样式值的字体大小来实现缩放图标的大小。
本发明还提供一种制作网页图标的系统，其包括:转化模块，用于将图标转化为字体格式；嵌入模块，用于将转化为字体格式的图标嵌入网页的界面中。
作为本发明进一步改进，制作网页图标的系统还包括：保存模块，用于保存转化为字体格式的图标于一文件夹中。
作为本发明进一步改进，制作网页图标的系统还包括：命名模块，为各转化为字体格式的图标命名。
作为本发明进一步改进，制作网页图标的系统还包括：设置模块，设置在网页的界面中需要显示图标的位置的样式值，在样式值中用content属性来对应要显示图标的名称。
本发明将图标转化成字体格式嵌入到网页的界面中，可以减少网页加载时http请求的次数，从而提升了网页的界面加载速度。
具体实施方式
为了使本领域相关技术人员更好地理解本发明的技术方案，下面将结合本发明实施方式，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本发明一部分实施方式，而不是全部的实施方式。
本发明提供一种制作网页图标方法，将单独的图标转化成字体格式嵌入到网页的界面中，从而可以减少http请求的次数，提升了网页的加载速度。
在网页的界面中，存在很多图标，本发明制作界面时，将各个图标转化为字体格式在界面中显示出来。
本发明具体的操作方法包括以下步骤：
将单独的各个图标均转化为字体格式，再创建一文件夹，将转化为字体格式后的图标存放在该文件夹中。在本发明实施过程中，还将文件夹命名为*.ttf；并且，还将存放在*.ttf文件夹中的各个图标一一命名，比如：某个图标命名后的名称为\e618。
当将各个图标转化为字体格式后，再将转化为字体格式的图标嵌入网页的界面中。具体的实现方式是：在网页的界面中需要显示图标的位置定义一个唯一的ID名称，比如定义一个“headerPost”的ID名称，再设置该ID名称的样式值，在“headerPost”的样式值中用content属性来对应要显示图标的名称，即：content:“\e618”，这样指定名称为“\e618”的图标在ID名称为“headerPost”的界面位置中显示出来，即实现使图标嵌入网页的界面中。
为了使图标需要放大或者缩小而又不影响图片的显示质量，本发明通过设置ID名称的样式值的字体大小来实现缩放图标的大小，像设置字体大小一样，无论怎样缩放都不会影响图片的显示质量。如果还要改变图标的图像颜色，可以直接设置样式值的颜色属性值。
本发明还提供了一种制作网页图标的系统，将单独的图标转化成字体格式嵌入到网页的界面中。本发明制作网页图标的系统包括转化模块、嵌入模块、保存模块、命名模块和设置模块。
转化模块用于将图标转化为字体格式，然后通过嵌入模块将转化为字体格式的图标嵌入网页的界面中。在本发明实施例中，在将图标转化为字体格式后，还通过保存模块将转化为字体格式的图标保存于一*.ttf文件夹中，再由命名模块为各转化为字体格式的图标一一命名。在将图标嵌入界面中时，通过设置模块设置在网页的界面中需要显示图标的位置的样式值，在样式值中用content属性来对应要显示图标的名称，这样指定图标在界面需要显示的位置中显示出来，即实现使图标嵌入网页的界面中。
以上仅表达了本发明的一种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。
Claims (9)
1.一种制作网页图标方法，其特征在于，包括以下步骤：
步骤1：将图标转化为字体格式；
步骤2：将转化为字体格式的图标嵌入网页的界面中。
2.根据权利要求1所述的制作网页图标方法，其特征在于，还包括创建一文件夹的步骤；将图标转化为字体格式后再存放在该文件夹中。
3.根据权利要求2所述的制作网页图标方法，其特征在于，将转化后的图标均命名。
4.根据权利要求3所述的制作网页图标方法，其特征在于，在网页的界面中需要显示图标的位置定义一个唯一的ID名称，再设置该ID名称的样式值，在样式值中用content属性来对应要显示图标的名称，从而使图标嵌入网页的界面中。
5.根据权利要求4所述的制作网页图标方法，其特征在于，通过设置ID名称的样式值的字体大小来实现缩放图标的大小。
6.一种制作网页图标的系统，其特征在于，包括:
转化模块，用于将图标转化为字体格式；
嵌入模块，用于将转化为字体格式的图标嵌入网页的界面中。
7.根据权利要求6所述的制作网页图标的系统，其特征在于，还包括：
保存模块，用于保存转化为字体格式的图标于一文件夹中。
8.根据权利要求7所述的制作网页图标的系统，其特征在于，还包括：
命名模块，为各转化为字体格式的图标命名。
9.根据权利要求8所述的制作网页图标的系统，其特征在于，还包括：
设置模块，设置在网页的界面中需要显示图标的位置的样式值，在样式值中用content属性来对应要显示图标的名称。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510328892.2A CN104915207A (zh) | 2015-06-15 | 2015-06-15 | 制作网页图标方法及其系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510328892.2A CN104915207A (zh) | 2015-06-15 | 2015-06-15 | 制作网页图标方法及其系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104915207A true CN104915207A (zh) | 2015-09-16 |
Family
ID=54084291
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510328892.2A Pending CN104915207A (zh) | 2015-06-15 | 2015-06-15 | 制作网页图标方法及其系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104915207A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107562315A (zh) * | 2017-08-29 | 2018-01-09 | 上海展扬通信技术有限公司 | 一种基于智能终端的应用图标调整方法及调整系统 |
| CN109144619A (zh) * | 2017-06-14 | 2019-01-04 | 阿里巴巴集团控股有限公司 | 图标字体信息处理方法、装置及系统 |
| CN117519859A (zh) * | 2022-07-30 | 2024-02-06 | 荣耀终端有限公司 | 一种界面调整方法及电子设备 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101008939A (zh) * | 2007-01-25 | 2007-08-01 | 深圳创维－Rgb电子有限公司 | 一种嵌入式系统的点阵字库的实现方法 |
| CN103186912A (zh) * | 2011-12-28 | 2013-07-03 | 北京神州泰岳软件股份有限公司 | 以图片格式展示文字的方法及系统 |
-
2015
- 2015-06-15 CN CN201510328892.2A patent/CN104915207A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101008939A (zh) * | 2007-01-25 | 2007-08-01 | 深圳创维－Rgb电子有限公司 | 一种嵌入式系统的点阵字库的实现方法 |
| CN103186912A (zh) * | 2011-12-28 | 2013-07-03 | 北京神州泰岳软件股份有限公司 | 以图片格式展示文字的方法及系统 |
Non-Patent Citations (1)
| Title |
|---|
| CYROTEL: "高手之路！浅谈图标字体化", 《HTTP://WWW.UISDC.COM/EXPERIENCE-FO-SHARING-ICON-FONT》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109144619A (zh) * | 2017-06-14 | 2019-01-04 | 阿里巴巴集团控股有限公司 | 图标字体信息处理方法、装置及系统 |
| CN107562315A (zh) * | 2017-08-29 | 2018-01-09 | 上海展扬通信技术有限公司 | 一种基于智能终端的应用图标调整方法及调整系统 |
| CN107562315B (zh) * | 2017-08-29 | 2021-08-13 | 上海展扬通信技术有限公司 | 一种基于智能终端的应用图标调整方法及调整系统 |
| CN117519859A (zh) * | 2022-07-30 | 2024-02-06 | 荣耀终端有限公司 | 一种界面调整方法及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101481684B1 (ko) | 아이콘 생성 방법 | |
| US8941663B2 (en) | Method and device for rendering user interface font | |
| CN103533244A (zh) | 拍摄装置及其自动视效处理拍摄方法 | |
| CN104503655A (zh) | 应用程序界面显示控制方法及装置 | |
| CN105701165B (zh) | 浏览器模式切换方法及切换装置 | |
| CN103425452A (zh) | 一种用于移动终端的多图层叠加显示方法及其装置 | |
| CN104915207A (zh) | 制作网页图标方法及其系统 | |
| TWI547853B (zh) | 使用者介面顯示系統及方法 | |
| CN109086020A (zh) | 分屏显示方法及装置 | |
| CN102917273A (zh) | 一种跨平台显示应用的方法及装置 | |
| WO2015096588A1 (zh) | 一种显示页面的切换方法及装置 | |
| US20130028514A1 (en) | Non-transitory computer-readable storage medium containing html file, file conversion method, and non-transitory computer-readable storage medium containing file conversion program | |
| CN103685982B (zh) | 基于多画面的场景切换方法和系统 | |
| CN105100870A (zh) | 一种截屏方法及终端设备 | |
| CN104020849B (zh) | 基于Windows CE的多程序同时显示方法及系统 | |
| CN109600515A (zh) | 一种信息处理方法以及电子设备 | |
| JP2024513380A (ja) | 字幕の処理方法、装置、機器及び記憶媒体 | |
| CN106775710A (zh) | 基于智能设备的跨平台界面交互开发系统及其运行方法 | |
| CN103744942A (zh) | 网页浏览方法及装置、网页浏览终端设备 | |
| CN109104628B (zh) | 安卓电视的焦点前景生成方法、存储介质、设备及系统 | |
| CN102724457A (zh) | 掩盖视频缩放过程中闪烁的方法、装置及电视机 | |
| CN103067774A (zh) | 一种机顶盒显示外挂字幕的方法及系统 | |
| CN100562918C (zh) | 一种数据显示方法及数据显示系统以及相关设备 | |
| US20100199196A1 (en) | Method for delivering graphic intensive web type content to thin clients | |
| CN103108242A (zh) | 一种解决智能电视视频类应用和电视视频冲突的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20150916 |