যে কোনও ওয়েব পৃষ্ঠায় উবুন্টু ফন্ট এম্বেড করুন


16

লাইসেন্সগুলি বিবেচনা করে:

কোনও ওয়েবসাইটে উবুন্টু ফন্ট পরিবারটি ইনস্টল না করে কীভাবে ব্যবহার করতে পারি?
এটি সরঞ্জাম সহ যেমন ব্যবহারের যে কোনও সুযোগ: http://code.google.com/intl/en-US/apis/webfouts/

উত্তর:


25

2 টি পদ্ধতি রয়েছে যার সাহায্যে আপনি আপনার ওয়েবসাইটে উবুন্টু হরফ এম্বেড করতে পারেন - গুগল ফন্ট ডিরেক্টরি (পছন্দসই) ব্যবহার করে বা @font-faceসিএসএস ঘোষণাটি ব্যবহার করে এবং আপনার ফন্টগুলি ম্যানুয়ালি রূপান্তর করে।

গুগল ওয়েবফন্ট ব্যবহার করে

আপনি এখন Google ওয়েব ফন্ট হিসাবে উবুন্টু ফন্ট ব্যবহার করতে পারেন। এটি প্রক্রিয়াটিকে অনেক সহজ করে তুলবে। উত্তরের এই অংশটির বেশিরভাগ সামগ্রী স্ল্যাডেনের উত্তর থেকে আসে ।

গুগল ফন্ট এপিআই কেন পছন্দসই পদ্ধতি ব্যবহার করছে?

গুগল ফন্ট এপিআই ব্যবহার করা একটি দুর্দান্ত পরামর্শ কারণ এটি ওয়েবফন্টগুলি বিশদ সম্পর্কে চিন্তা না করে সমস্ত আধুনিক ব্রাউজারে স্বয়ংক্রিয়ভাবে কাজ করতে দেয়। হরফ এপিআই ব্যবহার করার অর্থ দর্শকরা সর্বদা টাইপফাইজের সর্বশেষতম সংস্করণ স্বয়ংক্রিয়ভাবে দেখতে পাবেন।

আমি কীভাবে গুগল ফন্ট এপিআই ব্যবহার করতে পারি?

21 ডিসেম্বর 2010 থেকে উবুন্টু ফন্ট পরিবারটি এখন গুগল ফন্ট এপিআই থেকে অন্তর্ভুক্ত এবং ব্যবহারযোগ্য, এখানে যান:

আপনি গুগল ওয়েব ফন্টটি সংবাদ সম্পর্কে পোস্টিং পড়তে পারেন এবং তারপরে:

  1. গুগল ফন্ট ডিরেক্টরি খুলুন: " উবুন্টু - এই ফন্টটি ব্যবহার করুন " পৃষ্ঠা
  2. আপনার ওয়েব পৃষ্ঠার জন্য আপনার প্রয়োজনীয় রেগুলার, ইটালিক, বোল্ড এবং বোল্ড-ইটালিকের বাইরে ওজন এবং শৈলীর সংমিশ্রণটি টিক দিন ।

    বিকল্প পাঠ

  3. যদি ডিফল্টটি ভুল হয় তবে আপনার প্রয়োজনীয় ভাষা / স্ক্রিপ্ট সংমিশ্রণটি নির্বাচন করুন : ইংরেজি উদাহরণ সহ একটি রাশিয়ান ওয়েবসাইট "সিরিলিক, ল্যাটিন" ব্যবহার করতে পারে।

    বিকল্প পাঠ

  4. আপনার HTML পৃষ্ঠা বা টেম্পলেটগুলির <link>মধ্যে প্রদত্ত ট্যাগটি <head> ... </head>যুক্ত করুন <style> ... </style>এবং আপনার ট্যাগগুলির মধ্যে উপযুক্ত সিএসএস কোড যুক্ত করুন <head>

    উদাহরণস্বরূপ, আপনি যদি রাশিয়ান / ইংরাজী হাইব্রিড ওয়েবসাইট তৈরি করে এবং সমস্ত পাঠ্যের জন্য ফন্টটি ডিফল্ট হিসাবে ব্যবহার করতে চান তবে আপনি আপনার <head>ট্যাগগুলির মধ্যে নিম্নলিখিত কোডটি যুক্ত করতে পারেন :

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
    <style type="text/css" >
        body {
            font-family : 'Ubuntu', sans-serif;
        }
    </style>
    

দ্রষ্টব্য :

"লাতিন" হ'ল স্ক্রিপ্ট যা ইংরেজী এবং অন্যান্য অনেক ইউরোপীয় এবং আফ্রিকান ভাষায় লিখিত আছে।

"সাবসেটিং" নির্দিষ্ট ভাষার জন্য অক্ষর প্রেরণ করে হরফ ফাইলগুলিকে অনুকূল করে তোলে, ফন্টগুলি প্রায় 44 কেবি প্রতিটি হয়। এই মুহুর্তে প্রদর্শিত 168 কেবি চিত্রটি একটি একক ওয়েব ফন্ট ডাউনলোড হিসাবে সমস্ত 1,200+ গ্লাইফের জন্য most এবং একটি ওয়েবসাইটের জন্য বেশিরভাগের প্রয়োজন হয় না।

উবুন্টু হরফ ফাইলগুলি স্বয়ংক্রিয়ভাবে বিভিন্ন ব্রাউজারের জন্য সঠিক ফর্ম্যাটে রূপান্তরিত হয়; করতে এবং সংস্করণের উপর নির্ভর করে প্রয়োজনীয় ফরম্যাট WOFF, EOT, SVGবা TTF। সিএসএসের ডান সংমিশ্রণ প্রতিটি পৃষ্ঠার অনুরোধের সাথে সুনির্দিষ্ট এবং যাদুকরভাবে এই কঠিন সমস্যাটি সমাধান করে।

@ ফন্ট-ফেস ব্যবহার করে

আপনি এটির উবুন্টু ফন্ট এম্বেড করতে পারেন তাদের রূপান্তর করার WOFF ফন্ট । তারপরে আপনি সেগুলি সিএসএস @ ফন্ট-মুখ ঘোষণার ব্যবহার করে এম্বেড করতে পারেন। ফন্টগুলি (.ttf ফাইল) পাওয়া যাবে /usr/share/fonts/truetype/ubuntu-font-family

উদাহরণস্বরূপ, উবুন্টু নিয়মিত ফন্ট ব্যবহার করতে, ডাব্লুএফএফএফ ফাইলে রূপান্তরিত হয়ে উবুন্টু-আর.ওফ, এই সিএসএস কোডটি ব্যবহার করুন:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

একইভাবে উবুন্টু বোল্ডের জন্য:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

উবুন্টু ইটালিক:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

উবুন্টু বোল্ড ইটালিক:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

এটি সাম্প্রতিক সমস্ত ব্রাউজার দ্বারা সমর্থিত ।

বিবেচ্য বিষয়

দয়া করে মনে রাখবেন যে কিছু ব্যবহারকারী নির্দিষ্ট ফন্ট ব্যবহার করতে তাদের ব্রাউজারগুলি সেট আপ করে এবং কাস্টম ফন্টগুলি ব্যবহার করা হলে বিরক্ত হতে পারে। এছাড়াও, ফন্টটি কীভাবে বিতরণ করা যায় সে সম্পর্কে সঠিক শর্তাদি জন্য উবুন্টু ফন্ট লাইসেন্স পড়ুন


@ ডি কেন্টজ ২ - এটি সত্যই ভাল; আমি এখন আমার উত্তর পরিবর্তন করেছি।
dv3500ea

স্ল্যাডেনের উত্তরটি অনুলিপি করার প্রয়োজনীয়তা বুঝতে পারিনি। কেন শুধু এডিট করবেন না?
পাপুকাইজা

আমি এই প্রশ্নের উত্তর স্ল্যাডেনের অনেক আগে দিয়েছি, @ ফন্ট-ফেস পদ্ধতির রূপরেখাটি লিখেছি। এটি ফন্টটি গুগল ফন্ট এপিআই-এ যুক্ত করার আগে ছিল (এটি একটি আরও ভাল পদ্ধতি)। আমি আমার উত্তরের শুরুতে একটি সংক্ষিপ্ত নোট যুক্ত করেছি এবং স্ল্যাডেন আরও বিস্তৃতভাবে উত্তর দিয়েছিলাম এবং গুগল পদ্ধতিটি ব্যবহারের জন্য আরও ভাল উত্তর ছিল।
ডিভি 3500ea

1
যাইহোক, এই সময়ে আমার উত্তর গৃহীত হয়েছিল এবং অত্যন্ত উত্সাহিত হয়েছিল এবং ফলাফলটি হ'ল লোকেরা ভাবতে পারে তাদের @ ফন্ট-ফেস পদ্ধতিটি ব্যবহার করা উচিত যা কম পছন্দসই। স্ল্যাডেন এ সম্পর্কে ইমেলের মাধ্যমে আমার সাথে যোগাযোগ করেছিলেন এবং আমি এই সাইটের ক্রিয়েটিভ কমন্স লাইসেন্সের প্রয়োজন অনুসারে অ্যাট্রিবিউশন প্রদান করে আমার উত্তর পরিবর্তন করতে সম্মত হয়েছি।
ডিভি 3500ea

10

গুগল ফন্ট এপিআই ব্যবহার করা একটি দুর্দান্ত পরামর্শ কারণ এটি ওয়েবফন্টগুলি বিশদ সম্পর্কে চিন্তা না করে সমস্ত আধুনিক ব্রাউজারে স্বয়ংক্রিয়ভাবে কাজ করতে দেয়। হরফ এপিআই ব্যবহার করার অর্থ দর্শকরা সর্বদা টাইপফাইজের সর্বশেষতম সংস্করণ স্বয়ংক্রিয়ভাবে দেখতে পাবেন।

21 ডিসেম্বর 2010 থেকে উবুন্টু ফন্ট পরিবারটি এখন গুগল ফন্ট এপিআই থেকে অন্তর্ভুক্ত এবং ব্যবহারযোগ্য, এখানে যান:

আপনি গুগল ওয়েব ফন্টটি সংবাদ সম্পর্কে পোস্টিং পড়তে পারেন এবং তারপরে:

  1. গুগল ফন্ট ডিরেক্টরি খুলুন: " উবুন্টু - এই ফন্টটি ব্যবহার করুন " পৃষ্ঠা
  2. আপনার ওয়েব পৃষ্ঠার জন্য আপনার প্রয়োজনীয় রেগুলার, ইটালিক, বোল্ড এবং বোল্ড-ইটালিকের বাইরে ওজন এবং শৈলীর সংমিশ্রণটি টিক দিন ।
  3. যদি ডিফল্টটি ভুল হয় তবে আপনার প্রয়োজনীয় ভাষা / স্ক্রিপ্ট সংমিশ্রণটি নির্বাচন করুন : ইংরেজি উদাহরণ সহ একটি রাশিয়ান ওয়েবসাইট "সিরিলিক, ল্যাটিন" ব্যবহার করতে পারে।
  4. কপি এবং পেস্ট CSS এর দুই লাইন মধ্যে <head> ... </head>এবং <style>...</style>আপনার HTML পৃষ্ঠা বা টেমপ্লেট বিভাগে।

মন্তব্য:

"লাতিন" হ'ল স্ক্রিপ্ট যা ইংরেজী এবং অন্যান্য অনেক ইউরোপীয় এবং আফ্রিকান ভাষায় লিখিত আছে।

"সাবসেটিং" নির্দিষ্ট ভাষার জন্য অক্ষর প্রেরণ করে হরফ ফাইলগুলিকে অনুকূল করে তোলে, ফন্টগুলি প্রতিটি প্রায় 44 কেবি হয়। এই মুহুর্তে প্রদর্শিত 168 কেবি চিত্রটি একটি একক ওয়েব ফন্ট ডাউনলোড হিসাবে সমস্ত 1,200+ গ্লাইফের জন্য most এবং একটি ওয়েবসাইটের জন্য বেশিরভাগের প্রয়োজন হয় না।

উবুন্টু হরফ ফাইলগুলি স্বয়ংক্রিয়ভাবে বিভিন্ন ব্রাউজারের জন্য সঠিক ফর্ম্যাটে রূপান্তরিত হয়; করতে এবং সংস্করণের উপর নির্ভর করে প্রয়োজনীয় ফরম্যাট WOFF, EOT, SVGবা TTF। সিএসএসের ডান সংমিশ্রণ প্রতিটি পৃষ্ঠার অনুরোধের সাথে সুনির্দিষ্ট এবং যাদুকরভাবে এই কঠিন সমস্যাটি সমাধান করে।


8

সার্ভার-সাইড ফন্ট রেন্ডারিং (সম্ভবত আরও ভাল "ডায়নামিক ফন্ট রেন্ডারিং" এর) বেশ দীর্ঘ সময়ের জন্য একটি আকর্ষণীয় সমস্যা হয়ে দাঁড়িয়েছে।

প্রযুক্তিগতভাবে, এটি যৌক্তিক বলে মনে হচ্ছে যে কোনও মেশিনের জন্য একটি নির্দিষ্ট ফন্ট প্রদর্শন করার জন্য, এটি ইতিমধ্যে স্থানীয়ভাবে ইনস্টল করা উচিত।

অন্যদিকে, ওয়েব ডিজাইনটি বেসিক / সুপরিচিত 'ওয়েব ফন্টে' আটকে থাকার মাধ্যমে অনেকটাই হেরে যায়।

CSS2.1 @ ফন্ট-মুখের নিয়ম ঘোষণার ব্যবহার করে কিছু উন্নতি করেছে ।
এটি এখনও একটি স্ট্যান্ডার্ড হয়ে উঠেনি, তবে এটি শেষ পর্যন্ত CSS3 এর সাথে।

তা ছাড়াও কয়েকটি বিকল্প পদ্ধতি রয়েছে, যেমন:

আমি আশা করি প্রদত্ত লিঙ্কগুলি আপনাকে কী করা যায় তার একটি ভাল ধারণা দেবে ;-)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.