Schrift Generator
Erstelle deine Schriftgröße Form und style
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
margin: 0;
}
.container {
max-width: 700px;
margin: 40px auto 0 auto;
padding: 20px;
}
p {
color: #434242;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
font-weight: 400;
line-height: 1.8em;
}
a:link, a:visited, button.actionButton {
color: #3F51B5;
text-decoration: none;
padding-bottom: 5px;
padding-top: 5px;
}
a:hover, button.actionButton:hover {
background-color: #fde100;
border-radius: 3px;
text-decoration: none;
}
h1 {
color: black;
background-color: #fff200;
display: inline-block;
letter-spacing: -1px;
margin: 0;
line-height: 20px;
padding: 20px 20px 0 20px;
margin-bottom: 40px;
font-size: 50px;
}
h2 {
color: black;
background-color: #fff200;
display: inline-block;
letter-spacing: -1px;
margin: 0;
line-height: 10px;
padding: 10px 10px 0 10px;
margin-bottom: 20px;
font-size: 30px;
}
.columns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
margin: 24px 0;
}
.columns > div {
width: 50%;
}
.columns > div:first-child {
margin-right: 20px;
}
@media (max-width: 500px) {
.container {
max-width: 700px;
margin: 20px auto 0 auto;
padding: 10px 20px;
}
h1 {
font-size: 8.8vw;
line-height: 3.5vw;
margin-bottom: 20px;
}
.columns {
display: block;
margin: 0;
}
.columns > div {
width: 100%;
}
.columns > div:first-child {
margin-right: 0px;
margin-bottom: 40px;
}
.columns > div:last-child {
margin-bottom: 40px;
}
#webfont, #fallback {
margin: 0;
}
}
.sample {
font-weight: normal;
}
.input-field {
position: relative;
}
.input-field label {
position: absolute;
top: 0;
left: 2px;
font-size: 14px;
color: #424242;
}
.input-field input {
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
outline: none;
margin: 12px 0 60px 0;
padding-top: 4px;
padding-bottom: 5px; /* so that the 2px focused border doesn't jump */
box-shadow: none;
box-sizing: content-box;
font-size: 18px;
min-width: 170px;
width: 100%;
max-width: 400px;
}
.input-field input.with-checkbox {
margin-bottom: 0px;
}
.input-field input[type="checkbox"] {
width: auto;
margin: 0;
padding: 0;
margin-bottom: 8px;
min-width: 0;
}
.input-field input[type="range"] {
-webkit-appearance: none;
background: #3F51B5;
padding: 0;
margin-bottom: 8px;
height: 2px;
outline: none;
margin: 24px 0 30px 0;
border: none;
outline: none;
}
::-moz-range-track {
background: #3F51B5;
border: 0;
outline: none;
}
.input-field input:focus + label {
color: #3F51B5;
}
.input-field input[type=text]:focus {
border-bottom: 2px solid #3F51B5;
padding-bottom: 4px;
}
.input-field .text {
font-size: 14px;
}
.output {
position: relative;
min-height: 20px;
}
.overlap-font {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
footer {
margin-top: 50px;
padding-top: 8px;
border-top: 2px solid #fde100;
text-align: center;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
}
hr {
background: red;
}
.actionButton {
background: transparent;
border: none;
cursor: pointer;
position: relative;
font-size: 14px;
padding: 0;
}
.actionButton svg {
vertical-align: middle;
fill: #3F51B5;
width: 24px;
height: 24px;
}
.uploadFont {
display: none;
}
.dropAlert {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
align-items: center;
justify-content: center;
font-size: 13vmin;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
</style>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/js_webseite/sw.js', {scope: '/js_webseite/'}).then(_ => {
console.log('service worker is cool ????');
}).catch(e => {
console.error('service worker is not so cool ????', e);
throw e;
});
}
</script>
<div class="container">
<h1>Schriftstil-Matcher</h1>
<p>
Wenn Sie eine Webschriftart verwenden, sehen Sie zwischen der
anfänglichen Wiedergabe Ihrer websicheren Schriftart und der von Ihnen
ausgewählten Webschriftart zwangsläufig einen kurzen Text ohne Stil (oder FOUC).
Dies führt normalerweise aufgrund von Größenunterschieden zwischen den beiden Schriftarten zu einer
erschütternden Verschiebung des Layouts. Um diese Diskrepanz zu minimieren, können Sie versuchen,
die Fallback-Schriftart und die x-Höhen und Breiten der beabsichtigten
Webschriftart <a href="http://helenvholmes.com/writing/type-is-your-right">[1]</a>.
abzugleichen . Dieses Tool hilft Ihnen <b><i>genau</i></b> dabei ..
</p>
<br>
<div class="columns">
<div>
<div class="input-field" title="Type a different font family, like 'Arial', and tab away from the input to see a preview of it.">
<input value="Georgia" placeholder="Fallback font name"
id="fallbackName" data-target="fallback">
<label>Fallback font</label>
</div>
<br>
<div class="input-field">
<input type="range" value="16"
min="5" max="50" step="1"
id="fallbackSize"
data-target="fallback">
<label>Font size: <span id="fallbackSizeDisplay">16px</span></label>
</div>
<div class="input-field">
<input type="range" value="1.6"
min="0" max="5" step="0.05"
id="fallbackLineHeight"
data-target="fallback">
<label>Line height: <span id="fallbackLineHeightDisplay">1</span></label>
</div>
<div class="input-field">
<input type="range" value="300"
min="100" max="900" step="100"
id="fallbackWeight"
data-target="fallback">
<label>Font weight: <span id="fallbackWeightDisplay">300</span></label>
</div>
<div class="input-field">
<input type="range" value="0" min="-2" max="2" step="0.05"
id="fallbackSpacing"
data-target="fallback">
<label>Letter spacing: <span id="fallbackSpacingDisplay">0px</span></label>
</div>
<div class="input-field">
<input type="range" value="0" min="-2" max="2" step="0.05"
id="fallbackWordSpacing"
data-target="fallback">
<label>Word spacing: <span id="fallbackWordSpacingDisplay">0px</span></label>
</div>
<button class='actionButton clipboardButton' id="fallbackClipboardButton" data-clipboard-text="">
<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
<span>Copy CSS to clipboard</span>
</button>
<p id="fallback">The fox jumped over the lazy dog, the scoundrel.</p>
</div>
<div>
<div class="input-field" title="Type a different font family, like 'Arial', and tab away from the input to see a preview of it.">
<input value="Merriweather" placeholder="Web font name" class="with-checkbox"
id="webfontName" list="families"
data-target="webfont">
<datalist id="families"></datalist>
<label for="webfontName">Web font</label>
<input id="downloadFont" type="checkbox" checked>
<span class="text">Download from Google Fonts</span>, or:
<div>
<button class="actionButton" id="uploadFontBtn">
<svg viewBox="0 0 24 24"><path d="M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z"></svg>
<span>Upload font</span>
</button>
<input type="file" accept=".ttf,.otf,.woff,.woff2,.svg" class="uploadFont" id="uploadFont">
</div>
</div>
<br>
<div class="input-field">
<input type="range" value="16"
min="5" max="50" step="1"
id="webfontSize"
data-target="webfont">
<label>Font size: <span id="webfontSizeDisplay">16px</span></label>
</div>
<div class="input-field">
<input type="range" value="1.6"
min="0" max="5" step="0.05"
id="webfontLineHeight"
data-target="webfont">
<label>Line height: <span id="webfontLineHeightDisplay">1</span></label>
</div>
<div class="input-field">
<input type="range" value="300"
min="100" max="900" step="100"
id="webfontWeight"
data-target="webfont">
<label>Font weight: <span id="webfontWeightDisplay">300</span></label>
</div>
<div class="input-field">
<input type="range" value="0" min="-2" max="2" step="0.05"
id="webfontSpacing"
data-target="webfont">
<label>Letter spacing: <span id="webfontSpacingDisplay">0px</span></label>
</div>
<div class="input-field">
<input type="range" value="0" min="-2" max="2" step="0.05"
id="webfontWordSpacing"
data-target="webfont">
<label>Word spacing: <span id="webfontWordSpacingDisplay">0px</span></label>
</div>
<button class='actionButton clipboardButton' id="webfontClipboardButton" data-clipboard-text="">
<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
<span>Copy CSS to clipboard</span>
</button>
<p id="webfont">The fox jumped over the lazy dog, the scoundrel.</p>
</div>
</div>
<h2>Overlapped</h2>
<p>In the default example, Merriweather is taller and wider than Georgia, so if you
bump Georgia's <b>font size</b> up to 18px, and its <b>letter spacing</b> to 0.1px
you'll get a pretty close match!</p>
<p>
<label><input type="checkbox" id="useColours">Use different colours for each font</label><br>
<label><input type="checkbox" id="simulateFout">See layout shift due to FOUC</label>
</p>
<br>
<div class="output">
<div id="fallbackOutput">The fox jumped over the lazy dog, the scoundrel.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="webfontOutput" contenteditable="true" class="overlap-font">The fox jumped over the lazy dog, the scoundrel.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<footer>
made with ✨ by <a href="https://twitter.com/notwaldorf">monica</a>. inspired
by <a href="https://twitter.com/helenvholmes">helen's</a> blog <a href="http://helenvholmes.com/writing/type-is-your-right">post</a>.
find this on <a href="https://github.com/notwaldorf/font-style-matcher">github</a>
</footer>
</div>
<div class="dropAlert" id="dropAlert">Drop it!</div>
</body>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>
<script>
(function() {
'use strict';
var clipboard = new Clipboard('.clipboardButton');
getAllGoogleFonts();
simulateFout.addEventListener('change', fout);
downloadFont.addEventListener('change', download);
useColours.addEventListener('change', colour);
uploadFont.addEventListener('change', upload);
uploadFontBtn.addEventListener('click', uploadBtn);
document.addEventListener('dragover', function(event) { event.preventDefault(); });
document.addEventListener('dragenter', dragEnter);
document.addEventListener('dragleave', dragLeave);
document.addEventListener('drop', drop);
download();
fallback.style.fontFamily = fallbackOutput.style.fontFamily = fallbackName.value;
webfont.style.fontFamily = webfontOutput.style.fontFamily = webfontName.value;
fallback.style.fontSize = fallbackOutput.style.fontSize = '16px';
webfont.style.fontSize = webfontOutput.style.fontSize = '16px';
fallback.style.lineHeight = fallbackOutput.style.lineHeight = '1.6';
webfont.style.lineHeight = webfontOutput.style.lineHeight = '1.6';
updateClipboardButtons();
fallbackName.addEventListener('input', updateFontFamily);
webfontName.addEventListener('input', updateFontFamily);
fallbackSize.addEventListener('input', updateFontSize);
webfontSize.addEventListener('input', updateFontSize);
fallbackLineHeight.addEventListener('input', updateLineHeight);
webfontLineHeight.addEventListener('input', updateLineHeight);
fallbackSpacing.addEventListener('input', updateFontSpacing);
webfontSpacing.addEventListener('input', updateFontSpacing);
fallbackWordSpacing.addEventListener('input', updateFontWordSpacing);
webfontWordSpacing.addEventListener('input', updateFontWordSpacing);
fallbackWeight.addEventListener('input', updateFontWeight);
webfontWeight.addEventListener('input', updateFontWeight);
webfontOutput.addEventListener('blur', changeText);
webfontOutput.addEventListener('focus', clearText);
clipboard.on('success', function(e) {
var span = e.trigger.querySelector('span')
span.textContent = 'Copied!';
setTimeout(function() {
span.textContent = 'Copy CSS to clipboard';
}, 1000);
});
clipboard.on('error', function(e) {
var span = e.trigger.querySelector('span')
span.textContent = 'Error copying :(';
setTimeout(function() {
span.textContent = 'Copy CSS to clipboard';
}, 1000);
});
function clearText() {
fallbackOutput.style.height = this.offsetHeight + 'px';
fallbackOutput.innerHTML = "";
}
function changeText() {
fallbackOutput.style.height = 'auto';
fallbackOutput.innerHTML = this.innerHTML;
}
function updateFontSize(event) {
var value = event.target.value + 'px';
var which = event.target.dataset.target;
updateStyle('font-size', which, value);
updateStyle('font-size', which + 'Output', value);
document.getElementById(which + 'SizeDisplay').textContent = value;
}
function updateLineHeight(event) {
var value = event.target.value;
var which = event.target.dataset.target;
updateStyle('line-height', which, value);
updateStyle('line-height', which + 'Output', value);
document.getElementById(which + 'LineHeightDisplay').textContent = value;
}
function updateFontSpacing(event) {
var value = event.target.value + 'px';
var which = event.target.dataset.target;
updateStyle('letter-spacing', which, value);
updateStyle('letter-spacing', which + 'Output', value);
document.getElementById(which + 'SpacingDisplay').textContent = value;
}
function updateFontWordSpacing(event) {
var value = event.target.value + 'px';
var which = event.target.dataset.target;
updateStyle('word-spacing', which, value);
updateStyle('word-spacing', which + 'Output', value);
document.getElementById(which + 'WordSpacingDisplay').textContent = value;
}
function updateFontFamily(event) {
var value = event.target.value;
var which = event.target.dataset.target;
updateStyle('font-family', which, value);
updateStyle('font-family', which + 'Output', value);
if (which === 'webfont') {
download();
}
}
function updateFontWeight(event) {
var value = event.target.value;
var which = event.target.dataset.target;
updateStyle('font-weight', which, value);
updateStyle('font-weight', which + 'Output', value);
document.getElementById(which + 'WeightDisplay').textContent = value;
}
function updateStyle(name, element, value) {
document.getElementById(element).style[name] = value;
updateClipboardButtons();
}
function updateClipboardButtons() {
var fallbackCss = fallbackOutput.style.cssText.split('; ').join('\n');
var webfontCss = webfontOutput.style.cssText.split('; ').join('\n');
document
.getElementById('fallbackClipboardButton')
.setAttribute('data-clipboard-text', fallbackCss);
document
.getElementById('webfontClipboardButton')
.setAttribute('data-clipboard-text', webfontCss);
}
function fout(event) {
if (!event.target.checked) {
clearTimeout(window.__timeout1);
clearTimeout(window.__timeout2);
clearTimeout(window.__timeout3);
fallbackOutput.style.visibility = 'visible';
webfontOutput.style.visibility = 'visible';
} else {
startFout();
}
}
function startFout() {
fallbackOutput.style.visibility = 'hidden';
webfontOutput.style.visibility = 'hidden';
window.__timeout1 = setTimeout(function() {
fallbackOutput.style.visibility = 'visible';
window.__timeout2 = setTimeout(function() {
fallbackOutput.style.visibility = 'hidden';
webfontOutput.style.visibility = 'visible';
window.__timeout3 = setTimeout(startFout, 1000);
}, 500);
}, 100)
}
function download() {
var shouldDownload = downloadFont.checked;
if (!shouldDownload)
return;
var url = 'https://fonts.googleapis.com/css?family=' + webfontName.value.trim() +
':300,300i,400,400i,700,700i,900,900i';
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
function colour() {
var shouldColour = useColours.checked;
fallbackOutput.style.color = shouldColour ? 'red' : 'black';
}
function getAllGoogleFonts() {
var request = new XMLHttpRequest();
var url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAkX01E9DhABr4cn4tKD26JuHQstaT5-Ss';
request.open('GET', url, true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var data = JSON.parse(request.responseText);
var names = data.items;
var options = '';
for (var i = 0; i < names.length; i++) {
options += '<option value="'+ names[i].family +'"/>';
}
document.getElementById('families').innerHTML = options;
}
};
request.send();
}
var currentObjectURL = '';
function upload() {
var file = uploadFont.files[0];
if (!file) return;
processFile(file);
}
function processFile(file) {
if (currentObjectURL) {
URL.revokeObjectURL(currentObjectURL);
}
var cssName = JSON.stringify(file.name);
var style = document.createElement('style');
webfontName.value = file.name;
currentObjectURL = URL.createObjectURL(file);
style.textContent = `
@font-face {
font-family: ${cssName};
src: url(${JSON.stringify(currentObjectURL)});
}
`;
document.head.appendChild(style);
updateStyle('font-family', 'webfont', cssName);
updateStyle('font-family', 'webfont' + 'Output', cssName);
}
function uploadBtn(event) {
event.preventDefault();
uploadFont.click();
}
var supportedExtensions = uploadFont.accept.split(',');
// lol drag & drop is still horrible
var enterCount = 0;
function dragEnter() {
enterCount++;
dropAlert.style.opacity = 1;
}
function dragLeave() {
enterCount--;
if (!enterCount) {
dropAlert.style.opacity = 0;
}
}
function drop(event) {
event.preventDefault();
enterCount = 0;
dropAlert.style.opacity = 0;
var file = event.dataTransfer.files[0];
if (!file) return;
var fileSupported = supportedExtensions.some(function(ext) {
return file.name.endsWith(ext);
});
if (!fileSupported) return;
processFile(file);
}
})();
</script>