문자 간격 변경

일반 문자 (ABC)를 전각 문자 (ABC)로 변환하는 방법을 찾으려고했습니다. 나는 너희들에게 어떻게 접근하고 있는지를 알 수 없다. 아직 자바 스크립트 코드가 없습니다.문자 간격 변경

<html> 

<head> 

</head> 

<body> 

<link rel="stylesheet" type="text/css" href="main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet"> 

<h1>Text convertor 2000</h1> 

<textarea placeholder="Text Input" id="textarea_left" spellcheck="false"></textarea> 
    <textarea placeholder="Text Output" id="textarea_right" spellcheck="false"></textarea> 


</body> 



</html>

하고 (그렇지 유용 할 수 있습니다 경우에도) CSS :

body { 
background: linear-gradient(270deg, #ffa6ff, #6bffff); 
    background-size: 200% 200%; 
    -webkit-animation: backgroundGradient 15s linear infinite; 
    -moz-animation: backgroundGradient 15s linear infinite; 
    animation: backgroundGradient 15s linear infinite; 
} 

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 

h1 { 
    font-family: 'Space Mono', monospace; 
    font-size: 50px; 
    margin-left: 640px; 
    color: #631b87; 
    -webkit-animation: simpleColorChange 5s ease infinite; 
    -moz-animation: simpleColorChange 5s ease infinite; 
    -o-animation: simpleColorChange 5s ease infinite; 
    animation: simpleColorChange 5s ease infinite; 
} 

@-webkit-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@-moz-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@-o-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

#textarea_left { 
    margin-left: 280px; 
    margin-top: 80px; 
    width: 650px; 
    height: 550px; 
    resize: none; 
    border: none; 
    overflow: auto; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 25px; 
} 

#textarea_right { 
    margin-left: 10px; 
    margin-top: 80px; 
    width: 650px; 
    height: 550px; 
    resize: none; 
    border: none; 
    overflow: auto; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 25px; 
} 

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: #585652; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: #585652; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: #585652; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: #585652; 
} 

@-webkit-keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
} 

@-moz-keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
} 

@keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
}

감사합니다 여기 내 HTML입니다. 상대 값으로 출력 textarea의

출처

2016-12-20 Anonymous

다만 설정된 letter-spacing CSS property (em처럼)과 input 이벤트에 outupt textarea에 입력 textarea의 값을 복사

// Get DOM references: 
 
var input = document.getElementById("textarea_left"); 
 
var output = document.getElementById("textarea_right"); 
 

 
// Set up an event listener on the input textarea for when it receives input 
 
input.addEventListener("input", function(){ 
 
    // Set the text of the output textarea to the input textarea's text 
 
    output.value = input.value; 
 
});

textarea { width:200px; height:200px; } 
 
.input { font-family:Arial, Helvetica, sans-serif; } 
 
/* Setting the letter-spacing to 1em creates a space of the height of 
 
    one letter "M" for each character. Change it in decimals to go bigger 
 
    or smaller as needed  */ 
 
.output { font-family:serif; letter-spacing:1em; }

<h1>Text convertor 2000</h1> 
 

 
<textarea placeholder="Text Input" id="textarea_left" spellcheck="false" class="input"></textarea> 
 
<textarea placeholder="Text Output" id="textarea_right" spellcheck="false" class="output"></textarea>

출처

2016-12-20 18:34:18

응답 해 주셔서 감사합니다. 그러나 제가 의미하는 바가 아니므로, 전폭의이 유형으로 바꾸는 것을 의미했습니다. 안녕하세요. 안녕하세요. –

그 너비에 도달하기 위해 어떤 알고리즘을 사용하고 있습니까? 전체 너비의 "유형"은 무엇입니까? 내 업데이트 답변을 참조하십시오. –

저는 실제로 이미 알고있는 변환기를 다시 만들려고합니다. 그래서 실제로 어떻게 작동하는지 전혀 모릅니다. 그것은 유니 코드 컨소시엄 코드 차트에서 U + FF0x부터 U + FF9x까지 다양합니다. 다음은 변환기입니다. https://lingojam.com/VaporwaveTextGenerator –

문자 간격 변경

답변

관련 문제