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

代码语言：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 {
  border-color: #4299E1;
}

input[type=range]:focus::-moz-range-thumb {
  background: #63B3ED;
  border-color: #4299E1;
}
/* End of Input range styles */
</style>

</head>
<body translate="no">
<div class="w-full h-full flex justify-center align-center">
<div class="max-w-md font-sans">
<div class="bg-white shadow-lg rounded p-8 m-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="input-text">Text</label>
<input class="shadow apperance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-blue-500" id="input-text" type="text" placeholder="Text" />
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="input-font-family">Font Family</label>
<div class="relative">
<select id="input-font-family" class="shadow appearance-none w-full border border-gray-200 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500">
<option class="roboto font-bold text-lg">Roboto</option>
<option class="merriweather font-bold text-lg">Merriweather</option>
<option class="raleway font-bold text-lg">Raleway</option>
<option class="lora font-bold text-lg">Lora</option>
</select>
<div cl.........完整代码请登录后点击上方下载按钮下载查看