Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>fontPicker</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('bgImg.jpg');
background-size: 300%;
}
.wrapper {
overflow: hidden;
}
.titleLabel {
position: absolute;
top: 5%;
right: -40%;
width: 100%;
height: 60px;
background-color: #c00;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
font-size: 35px;
color: #fff;
text-align: center;
line-height: 60px;
-webkit-transform: rotateZ(25deg);
-moz-transform: rotateZ(25deg);
-ms-transform: rotateZ(25deg);
}
.fontContainer {
float: left;
box-sizing: border-box;
margin: 5% 5% 70px;
padding: 3%;
width: 90%;
border-radius: 5px;
background-color: rgba(0,0,0,0.3);
}
.font-box {
float: left;
box-sizing: border-box;
margin: 0 2% 2% 0;
width: 18%;
height: 50px;
background-color: #5aa;
border-radius: 3px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
font-size: 20px;
color: #fff;
text-align: center;
line-height: 50px;
overflow: hidden;
cursor: pointer;
}
.font-box:hover {
font-size: ;
}
.fixedLabel {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: rgba(0,0,0,0.7);
text-align: center;
}
.fixedTextarea {
margin-top: 17px;
width: 70%;
max-width: 90%;
height: 30px;
font-size: 14px;
resize: horizontal;
}
.selectText {
}
.selected {
background-color: #c55;
}
.bgImg {
position: absolute;
top: 0;
background-image: url('bgImg.jpg');
background-size: contain;
width: 100%;
height: 1000px;
}
@media screen and (max-width:768px) {
body {
background-size: 400%;
}
.titleLabel {
right: -40%;
top: 2%;
height: 40px;
font-size: 20px;
line-height: 40px;
}
.font-box {
width: 23%;
height: 40px;
font-size: 11px;
line-height: 40px;
}
.fixedTextarea {
width: 70%;
font-size: 13px;
}
}
@media screen and (max-width:480px) {
body {
background-size: 700%;
}
.titleLabel {
top: 1%;
height: 30px;
font-size: 10px;
line-height: 30px;
}
.font-box {
width: 31%;
height: 40px;
font-size: 10px;
line-height: 40px;
}
.fixedTextarea {
width: 70%;
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="titleLabel" class="titleLabel">Font Picker</div>
<div id="fixedLabel" class="fixedLabel">
<textarea id="fixedTextarea" class="fixedTextarea"></textarea>
<button id="selectText" class="selectText">Select</button>
</div>
<div id="fontContainer" class="fontContainer"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var fonts = ['sans-serif', 'arial', '"arial black"', '"arial narrow"', '"arial unicode ms"', '"Century Gothic"', '"Franklin Gothic Medium"', '"Gulim"', '"Dotum"', '"Haettenschweiler"', '"Impact"', '"Ludica Sans Unicode"', '"Microsoft Sans Serif"', '"MS Sans Serif"', '"MV Boil"', '"New Gulim"', '"Tahoma"', '"Trebuchet"', '"Verdana"', 'serif', 'Batang', '"Book Antiqua"', '"Bookman Old Style"', 'Century', '"Estrangelo Edessa"', 'Garamond', 'Gautami', 'Georgia', 'Gungsuh', 'Latha', 'Mangal', '"MS Serif"', 'PMingLiU', '"Palatino Linotype"', 'Raavi', 'Roman', 'Shruti', 'Sylfaen', '"Times New Roman"', 'Tunga', 'monospace', 'BatangChe', 'Courier', '"Courier New"', 'DotumChe', 'GlimChe', 'GungsuhChe', 'HG行書体', '"Lucida Console"', 'MingLiU', '"MS ゴシック"', '"MS 明朝"', 'OCRB', 'SimHei', 'SimSun', '"Small Fonts"', 'Terminal', 'fantasy', 'alba', '"alba matter"', '"alba super"', '"baby kruffy"', 'Chick', 'Croobie', 'Fat', 'Freshbot', 'Frosty', 'GlooGun', 'Jokewood', 'Modern', '"Monotype Corsiva"', 'Poornut', '"Pussycat Snickers"', '"Weltron Urban"', 'cursive', '"Comic Sans MS"', 'HGP行書体', '"HG正楷書体-PRO"', '"Jenkins v2.0"', 'Script', '"MS UI Gothic"', '"MS Pゴシック"', '"MS ゴシック"', '"MS P明朝"', '"MS 明朝"', 'メイリオ', '"Meiryo UI"', '游ゴシック', '游明朝', 'Osaka'];
var log = function(x){console.log(x);}
var fontsLen = fonts.length;
for(var i = 0; i < fontsLen; i++) {
var fontText = fonts[i];
if(fontText.slice(0,1) == "\"") {
fontText = fonts[i].slice(1, -1);
}
var fontBox = $('<div />').addClass('font-box').css({
'font-family': fonts[i]
}).text(fontText);
$('#fontContainer').append(fontBox);
}
$('.font-box').click(function(){
//一度カンマを外す
var text = $('#fixedTextarea').text().replace(/","/g, '""');
$(this).toggleClass('selected');
var fontText = '\"' + $(this).text() + '\"';
if($(this).hasClass('selected')) {
text += fontText;
} else {
text = text.replace(fontText, '');
}
text = text.replace(/""/g, '","');
$('#fixedTextarea').text(text);
});
$('#selectText').click(function() {
$('#fixedTextarea').select();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment