사용 가능한 모든 글꼴을 볼 수있는 드롭 다운 메뉴를 만들고 우리가 선택한 글꼴을 선택할 수 있습니다. 또한 글꼴 색상 선택 위젯을 만들고 싶습니다. 글꼴 스타일이 많이 존재합니다. 나는이 모든 글꼴을 어떻게 얻고 사용자가 자신이 선택한 색상을 선택할 수 있는지를 사용하여 위젯을 만드는 방법을 알고 싶다.html로 글꼴 선택 표시 줄을 만드는 방법
글꼴 선택 드롭 다운 메뉴를 만들려면 목록을 사용하고 데모 목적으로 3-4 개의 글꼴 이름을 추가하고 표시하십시오. 잘 작동합니다. Google은 모든 글꼴 이름 목록을 제공했지만 HTML 코드로 작성하는 것은 좋은 접근 방식이 아닙니다. 나는이 모든 일을하기 위해 js 라이브러리가 있어야한다고 생각한다. 거기 있니?
유카 K. 펠라 바로,하지만 귀하의 질문에 대한 :
This 얻을해야 당신은 선택의 글꼴 가족에서 시작 :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="liveh1">Some text</h1>
<select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
<option> Serif </option>
<option> Arial </option>
<option> Sans-Serif </option>
<option> Tahoma </option>
<option> Verdana </option>
<option> Lucida Sans Unicode </option>
</select>
<script>
function updateh1family() {
var selector = document.getElementById('selecth1FontFamily');
var family = selector.options[selector.selectedIndex].value;
var h1 = document.getElementById('liveh1')
h1.style.fontFamily = family;
}
</script>
</body>
</html>
는 글꼴을 할 수 있습니다 설치되어 있는지 확인하는 것이 중요 경우 확인 도구로 this을 사용하십시오. 그리고 플래시를 사용해도 괜찮 으면 font-detect-js과 같은 것을 사용할 수 있습니다 (그들은 또한 demo이지만 Chrome에서 작동하도록 만들지는 못했습니다).
및 색상 선택기를 위해 내가 사용 권 해드립니다 것이다 : jscolor
는 희망이 도움이, 그리고 행운을 빕니다!
그 굉장한.. 많은 두렵다. – sachinjain024
jsColor는 정말로 시원하다.. 많은 두려움 – sachinjain024
이 가능한 모든 글꼴-에 IE가, http://www.cs.tut.fi/~jkorpela/listfonts1.html
참조하지만 거의 사용자가 자신의 기본 글꼴을 선택할 수 있도록하는 것을 의미 제어 이러한 목록을 제공하는 것이 좋습니다 없을 것입니다 얻을 수 있습니다. 이 목록에는 판타지 글꼴, Wingdings 글꼴, 기호 및 이상한 문자 레퍼토리가있는 글꼴과 같은 텍스트 글꼴로 이해할 수없는 메뉴 글꼴이 포함되어 있습니다.
"모든 글꼴 이름"목록은 매우 특정한 조건 하에서 모든 글꼴 이름의 위조 또는 단순한 목록입니다.
사용자가 선호하는 글꼴을 선택하게하는 가장 좋은 방법은 글꼴 집합을 전혀 설정하지 않아 브라우저 설정 (일반적으로 사용자가 제어 할 수 있음)이 최대 효과를 발휘하도록하는 것입니다. 그러나 Times New Roman이 가장 일반적인 공장 기본값이고 대부분의 사용자가 브라우저에서 글꼴 설정을 변경하는 데 관심이 없다는 등의 이유가 있습니다.
감사합니다. Jukka에게 감사드립니다. 사실 나는 사용자가 그의 선호하는 글꼴로 자신의 의견이나 메시지를 제출할 수 있도록 이것을 필요로하지만, 나는 당신의 요점을 가지고 ... 많은 덕분에 – sachinjain024
@blunderboy, 사용자가 선호하는 글꼴로 의견을 얻으려면, 나는 당신이 더 많거나 적게 필요하다고 생각한다. 제출 자료를 PDF 파일로 요청하고, 자신이 좋아하는 워드 프로세서에 쓰고 PDF로 저장하라는 안내문을 요청하십시오. 그리고 워드 프로세서에 이러한 기능이 있고 기본적으로 글꼴 포함을 사용하기를 바랍니다. –
아마 과용 할 수 있습니다 ...하지만 제가 글꼴 글꼴 선택기 예입니다. 이전에 작성한 Google 글꼴 API와 Document Fragment Builder 스크립트를 사용하여 생각해 냈습니다. 여기
var FragBuilder = (function() {
var applyStyles = function(element, style_object) {
for (var prop in style_object) {
element.style[prop] = style_object[prop];
}
};
var generateFragmentFromJSON = function(json) {
var tree = document.createDocumentFragment();
json.forEach(function(obj) {
if (!('tagName' in obj) && 'textContent' in obj) {
tree.appendChild(document.createTextNode(obj['textContent']));
} else if ('tagName' in obj) {
var el = document.createElement(obj.tagName);
delete obj.tagName;
for (part in obj) {
var val = obj[part];
switch (part) {
case ('textContent'):
el.appendChild(document.createTextNode(val));
break;
case ('style'):
applyStyles(el, val);
break;
case ('childNodes'):
el.appendChild(generateFragmentFromJSON(val));
break;
default:
if (part in el) {
el[part] = val;
}
break;
}
}
tree.appendChild(el);
} else {
throw "Error: Malformed JSON Fragment";
}
});
return tree;
};
var generateFragmentFromString = function(HTMLstring) {
var div = document.createElement("div"),
tree = document.createDocumentFragment();
div.innerHTML = HTMLstring;
while (div.hasChildNodes()) {
tree.appendChild(div.firstChild);
}
return tree;
};
return function(fragment) {
if (typeof fragment === 'string') {
return generateFragmentFromString(fragment);
} else {
return generateFragmentFromJSON(fragment);
}
};
}());
function jsonp(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
function replacestyle(url) {
if (!document.getElementById('style_tag')) {
var style_tag = document.createElement('link');
style_tag.rel = 'stylesheet';
style_tag.id = 'style_tag';
style_tag.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style_tag);
replacestyle(url);
}
document.getElementById('style_tag').href = url;
}
function loadFonts(json) {
var select_frag = [
{
'tagName': 'select',
'id': 'font-selection',
'childNodes': [
{
'tagName': 'option',
'value': 'default',
'textContent': 'Default'}
]}
];
json['items'].forEach(function(item) {
var family_name = item.family,
value = family_name.replace(/ /g, '+');
if (item.variants.length > 0) {
item.variants.forEach(function(variant) {
value += ':' + variant;
});
}
select_frag[0].childNodes.push({
'tagName': 'option',
'value': value,
'textContent': family_name
});
});
document.getElementById('container').appendChild(FragBuilder(select_frag));
document.getElementById('font-selection').onchange = function(e) {
var font = this.options[this.selectedIndex].value,
name = this.options[this.selectedIndex].textContent;
if (font === 'default') {
document.getElementById('sink').style.fontFamily = 'inherit';
} else {
document.getElementById('sink').style.fontFamily = name;
replacestyle('https://fonts.googleapis.com/css?family=' + font);
}
};
}
jsonp("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDBzzPRqWl2eU_pBMDr_8mo1TbJgDkgst4&sort=trending&callback=loadFonts");
. https://github.com/saadqbal/HiGoogleFonts. 은이 콜백 메소드가 있습니다
일부 수준에서 서식있는 텍스트 편집기를 개발하려는 것처럼 냄새가납니다. 바퀴를 재발 명하지 마십시오. – MetalFrog
Google 글꼴 api로 재미를 볼 수 있습니다. P http://jsfiddle.net/rlemon/ENpWt/ – rlemon