Tự động tải phông chữ web

Tôi mới sử dụng phông chữ web này. Tôi hiểu rằng một phông chữ nhất định có thể được tải xuống từ một URL và được sử dụng trong một trang web.Tự động tải phông chữ web

Câu hỏi của tôi là: có thể tải phông chữ web tự động tùy thuộc vào đầu vào của người dùng không? Kịch bản đơn giản: loại người dùng trong một số văn bản trong trường văn bản và chọn tên phông chữ là chưa được tải. Một số mã javascript được kích hoạt để tự động tải tài nguyên phông chữ web. Điều này có thể không?

Nguồn

2015-09-11 lang2

Bắt đầu bằng cách cung cấp cho chúng tôi một số HTML để làm việc cùng. Ví dụ, bạn nói bạn muốn đầu vào của người dùng để có một trường đầu vào. Nhưng liệu người dùng có thể chọn từ một danh sách được xác định trước hoặc có thể là bất kỳ phông chữ nào không? Sau này không phải là một ý tưởng tốt bởi vì có rất nhiều phông chữ mà không phải là miễn phí để sử dụng. Ngoài ra, bạn muốn nhận các webfont của mình từ đâu? Google Fonts? Hoặc một tài nguyên khác? Và những gì về trọng lượng? Tất cả các trọng số có sẵn, hoặc chỉ là 'bình thường'? Và điều gì sẽ xảy ra khi người dùng nhập vào phông chữ mà họ muốn? Tất cả văn bản nội dung có nên trở thành phông chữ đó không? Rất nhiều câu hỏi. Vì vậy, vui lòng chỉ định thêm. –

http://stackoverflow.com/questions/14856721/dynamically-load-fonts-html-jquery –

Điều này có thể giúp quá http://stackoverflow.com/questions/16553326/dynamically-load-google-fonts-after-page -has-loaded –

Hãy thử điều này (cho các phông chữ trên web của Google):

<span>Select font:</span> 
<select onchange=fontSelected(event)> 
    <option value="default">Browser Default</option> 
    <option value="Droid+Sans">Droid Sans</option> 
    <option value="Open+Sans">Open Sans</option> 
</select> 
<h1 id="theText">This is a sample text...</h1> 

function fontSelected(e){ 
    var select = e.target; 
    if (select.selectedIndex > 0) { // web font 
     var fontID = select.options[select.selectedIndex].value; 
     if (!document.getElementById(fontID)) { 
      var head = document.getElementsByTagName('head')[0]; 
      var link = document.createElement('link'); 
      link.id = fontID; 
      link.rel = 'stylesheet'; 
      link.type = 'text/css'; 
      link.href = 'http://fonts.googleapis.com/css?family='+fontID; 
      link.media = 'all'; 
      head.appendChild(link); 
     } 
     document.getElementById("theText").style.fontFamily = select.options[select.selectedIndex].innerHTML; 
    }else{ // default browser font 
     document.getElementById("theText").style.fontFamily = null; 
    } 
}

http://jsfiddle.net/zejz2tkp/1/

Mã này được bassed về bài đăng này: http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

Bạn cũng có thể sử dụng một trong các câu trả lời tồn tại: Load external font with javascript and jquery hoặc dynamically load fonts html jquery

Nguồn

2015-09-11 14:47:49