字体的矢量文字怎么制作的

字体的矢量文字制作方法如下：

一、对于AI软件来说

1、为了避免不同电脑没安装同种字体而导致显示的失效，需要通过软件的转换曲线命令来将文字处理成更易保存的矢量格式。

2、打开AI软件，新建一个文档，输入需要的文字内容。（如下图）

3、选中文字，然后点击鼠标右键，在d出的快捷菜单中点击创建轮廓命令。（如下图）

4、此时文字就变成了矢量文字，同时失去了可用文字工具编辑的属性。（如下图）

5、注意问题：当文字变成矢量文字后，如果需要修改，只能通过矢量修改工具来修改外形，例如：钢笔工具等。

二，对于PS软件来说

1、PS本身是制作不出高精度的矢量文字效果，必须配合AI软件才可以实现。

2、打开AI软件，新建一个文档，输入想要的文字内容。

3、选中文字，然后点击鼠标右键，在d出的快捷菜单中点击创建轮廓命令。

4、这时文字就变成了矢量文字，按下键盘的快捷键ctrl+C复制这个矢量

5、打开PS软件，新建一个文档，按下键盘的快捷键ctrl+V 拷贝复制内容，此时会d出一个粘贴选择对话框，这里勾选形状图层选项。点击确定

6，这时，文档中就会出现我们想要的矢量文字效果了。

7，注意问题：当文字变成矢量文字后，如果需要修改，只能通过矢量修改工具来修改外形，例如：钢笔工具等。

做了比较大的修改，不需要数组，角度的判断也不必那么麻烦！具体看代码：

#include <stdio.h>

#include <conio.h>

#include <math.h>

//将输入的n个矢量(size,direction)叠加，输出总矢量的大小和方向

int main(){

  int n,i

  float x=0,y=0,s,d

  printf("Please input how many vectors you want to add.\n")

  scanf("%d",&n)

  printf("Please input these vectors\nSize Direction\n")

  for(i=0i<n++i){

    scanf("%f%f",&s,&d)

    d*=M_PI/180 //将输入的角度制转换为弧度制

    x+=s*cos(d)

    y+=s*sin(d) //这里处理为边输入，边累加计算x,y

  }

  s=sqrt(x*x+y*y) //计算合矢量大小

  if(s<1e-6)d=0 //合矢量大小几乎为0，则方向也定为0

  else{

    d=acos(x/s) //由反余弦计算方向角，结果在第I、II象限，即d=[0,π)

    if(y<0)d=-d //如果y是负值，则方向角相应地在第IV、III象限，即d=(-π,0)

    d*=180/M_PI //将结果转换为角度制

    if(d<0)d+=360//将方向角调整到[0,360)

  }

  printf("Answer\nSize:%.1f\nDirection: %.0f\n",s,d)

  printf("\nFinished!\n")

  getch()

  return 0

}

运行结果如下：

Please input how many vectors you want to add.

2

Please input these vectors

Size Direction

1 60

1 120

Answer

Size:1.7

Direction: 90

Finished!

希望能帮到你！

/* Font-face 首先第一步设置调用fontawesome的路径

============================================================================= */

@font-face {

  font-family: 'FontAwesome'

  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0')

  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg')

  font-weight: normal

  font-style: normal

}

/* Component 设置调用的默认大小

============================================================================= */

[class*="am-icon-"] {

  display: inline-block

}

[class*="am-icon-"]:before {

  display: inline-block

  font: normal normal normal 1.6rem/1 "FontAwesome", sans-serif

  /*font-weight: normal // 2

  font-style: normal // 2

  vertical-align: baseline // 3

  line-height: 1 // 4*/

  font-size: inherit

  text-rendering: auto

  -webkit-font-smoothing: antialiased

  -moz-osx-font-smoothing: grayscale

  -webkit-transform: translate(0, 0)

      -ms-transform: translate(0, 0)

          transform: translate(0, 0)

}

/* Icon mapping 第三部配置content，content里面的代码就是具体的fontawesome图标了

============================================================================= */

.am-icon-glass:before {

  content: "\f000"

}

.am-icon-music:before {

  content: "\f001"

}

.am-icon-search:before {

  content: "\f002"

}

.am-icon-envelope-o:before {

  content: "\f003"

}

.am-icon-heart:before {

  content: "\f004"

}

.am-icon-star:before {

  content: "\f005"

}

.am-icon-star-o:before {

  content: "\f006"

}

.am-icon-user:before {

  content: "\f007"

}

.am-icon-film:before {

  content: "\f008"

}

.am-icon-th-large:before {

  content: "\f009"

}

.am-icon-th:before {

  content: "\f00a"

}

.am-icon-th-list:before {

  content: "\f00b"

}

.am-icon-check:before {

  content: "\f00c"

}

.am-icon-remove:before,

.am-icon-close:before,

.am-icon-times:before {

  content: "\f00d"

}

.am-icon-search-plus:before {

  content: "\f00e"

}

.am-icon-search-minus:before {

  content: "\f010"

}

.am-icon-power-off:before {

  content: "\f011"

}

.am-icon-signal:before {

  content: "\f012"

}

.am-icon-gear:before,

.am-icon-cog:before {

  content: "\f013"

}

.am-icon-trash-o:before {

  content: "\f014"

}

.am-icon-home:before {

  content: "\f015"

}

.am-icon-file-o:before {

  content: "\f016"

}

.am-icon-clock-o:before {

  content: "\f017"

}

.am-icon-road:before {

  content: "\f018"

}

.am-icon-download:before {

  content: "\f019"

}

.am-icon-arrow-circle-o-down:before {

  content: "\f01a"

}

.am-icon-arrow-circle-o-up:before {

  content: "\f01b"

}

.am-icon-inbox:before {

  content: "\f01c"

}

.am-icon-play-circle-o:before {

  content: "\f01d"

}

.am-icon-rotate-right:before,

.am-icon-repeat:before {

  content: "\f01e"

}

.am-icon-refresh:before {

  content: "\f021"

}

.am-icon-list-alt:before {

  content: "\f022"

}

.am-icon-lock:before {

  content: "\f023"

}

.am-icon-flag:before {

  content: "\f024"

}

如下是展示的效果：

上fontawesome的官网下载相关的文件，那里也有例子说明的，说白了，这个fontawesome就是他们制作好的svg矢量图，然后通过content代码获取到相应的矢量图，在页面上展示，因为是矢量图，而且材料很丰富，所以很受欢迎。

给你发下我目录结构：

---