আমি কীভাবে গুগল ওয়েব ফন্টকে একটি এসভিজিতে এম্বেড করব?

Question

আমি অন্যের মধ্যে HTML5, CSS3 এবং SVGs এর মধ্যে নতুন ওয়েব প্রযুক্তির সুবিধাগুলি সম্পর্কে আমার সাইটে একটি নিবন্ধ লিখছি, অন্যটি কার্যকরভাবে কোনও চিত্র যা টেক্সট নির্বাচন করার দক্ষতা হ'ল তার অন্যতম সুবিধা।

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

Comments

@ আমদানি ভিত্তিক সমাধান সম্পর্কিত একটি গুরুত্বপূর্ণ নোট: তারা ব্যাকগ্রাউন্ড-চিত্রগুলির জন্য কাজ করে না। আপনাকে অবশ্যই বেস 64 এর মাধ্যমে ফন্টটি এম্বেড করতে হবে বা পরিবর্তে একটি চিত্র / অবজেক্ট ট্যাগ ব্যবহার করতে হবে।

— মিকি

Answer 1

আপনি বেস 6464 এনকোডিং ব্যবহার করে ফন্টগুলিকে CSS এ এম্বেড করেছেন। আপনি কোনও <style />উপাদান ব্যবহার করে সিএসএসের অনুরূপ এসভিজি নথিগুলিতে শৈলী প্রয়োগ করতে পারেন । সুতরাং আপনার যদি একটি ডাব্লুওউএফএফ ফন্ট থাকে তবে আপনি এটি এম্বেড করুন:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

যেখানে ...বেস 64 এনকোডেড ফন্ট ডেটা রয়েছে।

টাইপিকিটের স্টাইলশিট দেখে আপনি এর উদাহরণগুলি খুঁজে পেতে পারেন। আমি নিশ্চিত নই যে মাইম টাইপের ধরণটি font/woffসঠিক কিনা, আমি যেমন দেখেছি লোকেরাও এটি হওয়া উচিত বলে দাবি করে application/font-woff। যদিও font/woff, font/truetype, font/opentype, ইত্যাদি আরো জনপ্রিয় হবে বলে মনে হচ্ছে।

বিকল্পভাবে, আপনি আসলে ওয়েব ফন্টের এসভিজি সংস্করণটি নিতে এবং আপনার নথির ভিতরে এসভিজি ফন্টের বর্ণনা মার্কআপ এম্বেড করতে পারেন (যদিও ব্রাউজার সমর্থন মন্তব্যগুলিতে লুক নোট হিসাবে এখনও সীমিত)।

তবে এসভিজি স্পেসিফিকেশন অনুযায়ী আপনার কোনও বাহ্যিক ফন্টের সাথে লিঙ্ক করতে সক্ষম হওয়া উচিত । আপনার কাছে সেই ফন্টটি উল্লেখ করে একাধিক এসভিজি ডকুমেন্ট থাকলে তা সেরা সমাধান বলে মনে হবে।

Comments

.Woff জন্য সঠিক মাইম-টাইপ এখন application/font-woff। stackoverflow.com/a/5142316/90674

— sshow

"আপনি প্রকৃতপক্ষে ওয়েব ফন্টের এসভিজি সংস্করণটি গ্রহণ করতে এবং আপনার নথির ভিতরে এসভিজি ফন্টের বর্ণনা মার্কআপ এম্বেড করতে পারেন" সম্পর্কে আপনার সচেতন হওয়া উচিত যে "এসভিজি ফন্টগুলি বর্তমানে কেবল সাফারি এবং অ্যান্ড্রয়েড ব্রাউজারে সমর্থিত।" দেখুন developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (এছাড়াও caniuse.com/#feat=svg-fonts )

— লুক

এই থ্রেডটি অনেক সহায়তা করেছিল, তবে প্রশ্নটি তখন একটি ফন্টকে কীভাবে বেস 64 এ রূপান্তর করতে পারে became এই সাইট ট্রান্সফোনটার.আরগ অনেক সাহায্য করেছে এবং ফন্টের আকার হ্রাস করার জন্য ফন্টের কেবলমাত্র একটি উপসেট বেছে নিতে পারে।

— ফ্যাবিয়ান স্নোওয়ার্ট

এই উত্তরটি লোভনীয় বলে মনে হয়েছিল, তবে শেষ পর্যন্ত আমি এই পদক্ষেপগুলি আরও সহজ হতে পেলাম, তাই আমি সেগুলি ভাগ করেছি: গ্রাফিকডিজাইন.স্ট্যাককেচেঞ্জ_এই

— রায়ান

আমি যখন এই অ্যাডোব চিত্রকের মধ্যে এসজিজিটি খুলছি, ফন্টগুলি লোড হচ্ছে না। কোন সাহায্য?

— আমির নখওয়া

Answer 2

একটি <defs>বিভাগ মত

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

কাজ করে।

Comments

বর্তমান (ফেব্রুয়ারী 2016) ওয়েব ব্রাউজারগুলিতে, এসভিজি ফাইল স্ট্যান্ড-অ্যালোন লোড করার সময় এটি কেবল কাজ করে। উদাহরণের জন্য marians.github.io/test-webfouts-in-svg/test.svg দেখুন । এইচটিএমএল পৃষ্ঠার মধ্যে একই এসভিজি খোলার ফলে ফন্টটি লোড / রেন্ডার হয় না। উদাহরণ হিসাবে marians.github.io/test-webfouts-in-svg ব্যবহার করুন ।

— মেরিয়ান

একা একা থাকা এসভিজি এবং এইচটিএমএল পৃষ্ঠাগুলি ক্রোম সংস্করণ 73.0.3683.103 (অফিসিয়াল বিল্ড) (-৪-বিট) এ একই রকম কাজ করবে বলে মনে হচ্ছে।

— পল গ্রিম

আমি ব্রাউজারে এসভিজি খোলার সময় এটি ফন্টগুলি লোড করা হয়, তবে আমি যখন অ্যাডোব ইলাস্ট্রেটারে একই এসভিজি ফাইলটি খুলি তখন এটি ফন্টগুলি লোড করে না। কোন সাহায্য?

— আমির নখওয়া

Answer 3

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

দাবি অস্বীকার: আমি ন্যানোর পিছনে থাকা দলের সাথে আছি এবং আমরাও এর আগে একই সমস্যার মুখোমুখি হয়েছি তাই ন্যানো তৈরি করে নিজের চুলকানি স্ক্র্যাচ করার সিদ্ধান্ত নিয়েছিলাম। আশা করি এটি সহায়ক!

সম্পাদনা করুন: পর্দার আড়ালে কী ঘটে যায় তার একটি দ্রুত ব্যাখ্যা এখানে দেওয়া হয়েছে:

এসভিজিতে ফন্টগুলি এম্বেড করতে, আপনাকে প্রথমে ফন্ট পরিবারগুলি কী ব্যবহৃত হয় তা জানতে হবে। তারপরে আপনার এই ফন্ট ফাইলগুলি সন্ধান এবং ডাউনলোড করতে হবে। একবার ডাউনলোড হয়ে গেলে, আপনাকে নিয়মিত, বোল্ড, ইটালিকস এবং বোল্ড ইটালিকগুলি বেস 64 এনকোডিংয়ে রূপান্তর করতে হবে। আপনি যদি এটি ম্যানুয়ালি করে চলেছেন তবে কোন ফাইলটি গা bold় ব্যবহার করে এবং কোনটি না ব্যবহার করে তা জানার জন্য এটি প্রচুর পরিমাণে ফাইল work তারপরে আপনাকে আপনার এসভিজিতে সমস্ত 4 বেস 64 এনকোডযুক্ত স্ট্রিংগুলি অনুলিপি করতে হবে।

সে কারণেই আমরা ন্যানো তৈরি করি এবং নিশ্চিত হয়ে থাকি এটি স্বয়ংক্রিয়ভাবে এসভিজি স্ক্যান করে এবং কেবল ব্যবহৃত ফন্টগুলি সন্নিবেশ করায়। উদাহরণস্বরূপ, যদি গা bold় ব্যবহার না করা হয় বা কোনও পাঠ্য উপস্থিত না থাকে তবে কোনও ফন্ট এম্বেড করা হবে না। আপনাকে যা করতে হবে তা হ'ল আপনার এসভিজিটিকে ন্যানোতে টেনে আনুন এবং এটি একটি কবজির মতো কাজ করে! আপনি এখানে আরও শিখতে পারেন: https://vecta.io/blog/making-svg-easier-to-use

Comments

ঠিক আছে, দুর্দান্ত দেখাচ্ছে। দুর্ভাগ্যক্রমে একটি ওয়ার্ডপ্রেস সাইটে আপলোড করা যা এখন আগে এসভিজি গ্রহণ করতে পেরে বেশ খুশি হয়েছিল "দুঃখিত, এই ফাইলের ধরণটি সুরক্ষার কারণে অনুমোদিত নয়।" - এই কাজটি করার জন্য আমার কী দরকার?

— ক্রিস পিঙ্ক

Answer 4

এটি সরলকরণের চেয়েও বেশি হতে পারে, তবে আপনি কি গুগল থেকে ফন্টটি জিপ ফাইল হিসাবে ডাউনলোড করার কথা বিবেচনা করেছেন এবং তারপরে ইলাস্ট্রেটরকে এটি আপনার এসভিজি ফাইল আউটপুটে রূপান্তর করতে দেবেন?

এটি কেবলমাত্র তাত্ত্বিক হিসাবে আমি এখনও এটি চেষ্টা করি নি, তবে তাত্ত্বিকভাবে এটি কার্যকর বলে মনে হচ্ছে।

Answer 5

<desc>ট্যাগ পরে নিম্নলিখিত যুক্ত করুন

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Comments

এত গুগল ফন্ট অন্তর্ভুক্ত কেন? এটি এমনকি তাদের সমস্ত বা সর্বাধিক ব্যবহৃত আমি অনেক দেখতে পাই এবং এসভিজি সামগ্রিক ওজনকে যুক্ত করব।

— মিঃমিসিজ

আমি ব্রাউজারে এসভিজি খোলার সময় এটি ফন্টগুলি লোড করা হয়, তবে আমি যখন অ্যাডোব ইলাস্ট্রেটারে একই এসভিজি ফাইলটি খুলি তখন এটি ফন্টগুলি লোড করে না। কোন সাহায্য?

— আমির নখওয়া

Answer 6

আমার উত্তর আপডেট করুন। আমি এখন এই পৃষ্ঠায় একটি আলাদা উত্তর পছন্দ করি, যা ন্যানো ব্যবহার করতে হয়: https://ographicicdesign.stackexchange.com/a/121950/45239

ধরে নিই যে আপনি আপনার সিস্টেমে একটি ওয়েব ফন্ট ডাউনলোড এবং ইনস্টল করেছেন এবং একটি এসভিজি তৈরি করেছেন (সম্ভবত আমি নীচে বর্ণিত একই ধাপগুলি ব্যবহার করছি তবে "ফন্ট: রূপান্তরিত রূপরেখা" বেছে নিই না), আপনি এসএনজি ন্যানোতে আপলোড করতে পারেন এবং "এম্বেড ফন্ট: হ্যাঁ" বিকল্পটি দেখুন এবং ডাউনলোড ক্লিক করুন।

আমার পূর্ববর্তী উত্তর:

আপনি যদি নির্বাচিত পাঠ্য এবং এসইওর ত্যাগ করতে ইচ্ছুক হন:

1. ওয়েব ফন্টটি ডাউনলোড করুন।
2. এটি স্থানীয়ভাবে ইনস্টল করুন।
3. অ্যাডোব ইলাস্ট্রেটর খুলুন
4. আপনার পাঠ্য টাইপ করুন।
5. ফাইল> রফতানি করুন> রফতানি করুন…
6. ".SVG" চয়ন করুন

7. এই সেটিংস চয়ন করুন:

   • স্টাইলিং: ইনলাইন স্টাইল
   • হরফ: রূপরেখায় রূপান্তর করুন
   • ছবি: সংরক্ষণ করুন
   • অবজেক্ট আইডি: স্তর নামসমূহ
   • দশমিক: 2
   • (সক্ষম) মিনিফাই
   • (সক্ষম) প্রতিক্রিয়াশীল

8. Svচ্ছিকভাবে https://vecta.io/nano এ ফলাফলের এসজিজি আপলোড করুন (এটি আমার ফাইলের আকার 8.2% হ্রাস করতে সক্ষম হয়েছিল)

Comments

দুর্ভাগ্যক্রমে 'রূপরেখায় রূপান্তর করা' ছোট পাঠ্যের মাপের জন্য দুর্দান্ত বিকল্প নয়।

— ক্রিস পিঙ্ক

@ ক্রিসপিংক, হ্যাঁ আপনি ঠিক বলেছেন !, আপনি যদি ছোট ফন্ট আকারের জন্য অন্য কোনও বিকল্প খুঁজে পেয়ে থাকেন তবে দয়া করে ভাগ করুন

— সুপার মডেল

@ সুপারমোডেল আমি ন্যানোর দুর্দান্ত সাফল্যের সাথে ব্যবহার করেছি, ফন্টগুলি বদ্ধ দস্তাবেজ থেকে শৈলীগুলি তুলেছে। আমার প্রথম প্রচেষ্টা ব্যর্থ হয়েছিল তবে ন্যানো দলের যে ধরনের সহায়তায় আমরা কাজ করেছিলাম তা এটি এসভিজি শিরোনাম অক্ষত থাকার বিষয়টি নিশ্চিত করার একটি ঘটনা।

— ক্রিস পিঙ্ক