svg字体编辑器效果-html代码-BFW代码库

svg字体编辑器效果

代码语言：html

所属分类：其他

代码描述：svg字体编辑器效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&family=Bangers&family=Cairo:wght@300;400;700&family=Changa:wght@300;400;700&family=Galada&family=Inconsolata:wght@300;400;700&family=Lalezar&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Modak&family=Montserrat+Subrayada:wght@400;700&family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Notable&family=Nunito:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Oswald:wght@300;400;700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Raleway:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Tajawal:wght@300;400;700&family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Yellowtail&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #63B3ED;
}

/* font classes */
.roboto {
  font-family: Roboto, sans-serif;
}

.merriweather {
  font-family: Merriweather, serif;
}

.raleway {
  font-family: Raleway, sans-serif;
}

.lora {
  font-family: Lora, sans-serif;
}

/* Input range styles */
input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #ddd;
  border-radius: 4px;
  border: 1px solid #999;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #999;
  cursor: pointer;
  margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  border-color: #4299E1;
}

input[type=range]:focus::-webkit-slider-thumb {
  background: #63B3ED;
  border-color: #4299E1;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #ddd;
  border-radius: 4px;
  border: 1px solid #999;
}

input[type=range]::-moz-range-thumb {
  background-color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #999;
  cursor: pointer;
  margin-top: -4px;
}

input[type=range]:focus::-moz-range-track .........完整代码请登录后点击上方下载按钮下载查看